<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>Angular - 弃用的 API 和特性</title><meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
    Join the community of millions of developers who build compelling user interfaces with Angular."><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><link rel="stylesheet" href="styles.4adbe52ad34df01b5273.css"><style>.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media(max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media(hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}.cdk-high-contrast-active .mat-button-focus-overlay{background-color:#fff}.cdk-high-contrast-black-on-white .mat-button-focus-overlay{background-color:#000}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}.cdk-high-contrast-active .mat-button,.cdk-high-contrast-active .mat-fab,.cdk-high-contrast-active .mat-flat-button,.cdk-high-contrast-active .mat-icon-button,.cdk-high-contrast-active .mat-mini-fab,.cdk-high-contrast-active .mat-raised-button{outline:solid 1px}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active .mat-drawer.mat-drawer-end,.cdk-high-contrast-active [dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-ng-docs-c30]{color:#ff0}</style><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-background{display:none}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:"";display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="toc-toc-module-es2015.f8531f591ee147aebcc6.js"></script><script charset="utf-8" src="default~code-code-example-module~code-code-tabs-module-es2015.9efcc76d2979a2e605e0.js"></script><script charset="utf-8" src="code-code-example-module-es2015.fa05e6f700453813d256.js"></script><script charset="utf-8" src="assets-js-prettify-js-es2015.ba856648f2dd2d930a9b.js"></script></head><body><aio-shell ng-version="9.0.0-rc.11" class="aio-notification-hide folder-guide mode-stable page-guide-deprecations sidenav-open view-SideNav"><div id="top-of-page"></div><mat-toolbar color="primary" class="mat-toolbar app-toolbar no-print mat-primary mat-toolbar-multiple-rows"><mat-toolbar-row class="mat-toolbar-row notification-container"><aio-notification notificationid="survey-february-2019" expirationdate="2019-03-01" class="ng-tns-c22-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><span class="content ng-tns-c22-0"><a href="http://bit.ly/angular-survey-2019" target="_blank" class="ng-tns-c22-0"><mat-icon role="img" svgicon="insert_comment" aria-label="Announcement" class="mat-icon notranslate icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button mat-icon-button="" aria-label="Close" class="close-button ng-tns-c22-0 mat-icon-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="close" aria-label="Dismiss notification" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button mat-button="" title="Docs menu" class="hamburger mat-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="menu" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple"></div><div class="mat-button-focus-overlay"></div></button><a href="/" class="nav-link home"><img src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home" class="ng-star-inserted"></a><aio-top-menu _nghost-ng-docs-c30="" class="ng-star-inserted"><ul _ngcontent-ng-docs-c30="" role="navigation"><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="features" title="特性" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">特性</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="docs" title="文档" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">文档</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="resources" title="资源" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">资源</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="events" title="会议" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">会议</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="https://blog.wangke.io/" title="译者汪志成的博客，包括翻译文章和原创文章" target="_blank"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">译者博客</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="translations/cn/home" title="关于中文版" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input type="search" aria-label="search" placeholder="搜索"></aio-search-box><div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter"><mat-icon role="img" svgicon="logos:twitter" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github"><mat-icon role="img" svgicon="logos:github" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container role="main" class="mat-drawer-container mat-sidenav-container sidenav-container mat-drawer-transition has-floating-toc"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav tabindex="-1" class="mat-drawer mat-sidenav sidenav ng-tns-c18-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted mat-drawer-opened" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container ng-tns-c18-1"><aio-nav-menu class="ng-tns-c18-1"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="docs" title="Angular 文档简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="通过构建第一个 Angular 应用来学习基础知识" aria-pressed="false"><span>快速上手</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start" title="介绍 Angular 的组件模型、模板语法和组件通讯" target="_self"><span>你的第一个应用</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/routing" title="介绍如何使用浏览器的 URL 在组件之间进行路由" target="_self"><span>路由</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/data" title="介绍服务以及如何访问外部数据" target="_self"><span>管理数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/forms" title="学习如何使用表单从用户那里获取并管理数据" target="_self"><span>表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/deployment" title="通过你的应用放到 Firebase 或自己的服务器上来把它分享给外界" target="_self"><span>部署</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/setup-local" title="使用 Angular CLI 搭建本地开发环境简介" target="_self"><span>搭建环境</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的基本原理" aria-pressed="false"><span>基本原理</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="介绍 Angular 应用中的一些基本概念。" aria-pressed="false"><span>Angular 的基本概念</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用中的基本构造块。" target="_self"><span>基本概念简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于 Angular 模块（NgModules）。" target="_self"><span>模块简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self"><span>组件简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self"><span>服务与 DI 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="超越基础阶段。" target="_self"><span>后续步骤</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="英雄指南是这里大量 Angular 范例的基础" aria-pressed="false"><span>英雄指南</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self"><span>应用的“外壳”</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self"><span>1. 英雄编辑器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self"><span>2. 显示英雄列表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的视图重构成几个独立的组件。" target="_self"><span>3. 创建特性组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self"><span>4. 添加服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self"><span>5. 添加应用内导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self"><span>6. 从服务器获取数据</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="通过数据绑定构建动态视图" aria-pressed="false"><span>组件与模板</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self"><span>显示数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self"><span>模板语法</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self"><span>用户输入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self"><span>生命周期钩子</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self"><span>组件交互</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self"><span>组件样式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self"><span>动态组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素" target="_self"><span>Angular 元素</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self"><span>属性型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self"><span>结构型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self"><span>管道</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 的表单" aria-pressed="false"><span>表单</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self"><span>响应式表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self"><span>模板驱动表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self"><span>表单验证</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self"><span>动态表单</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Observable 与 RxJS" aria-pressed="false"><span>Observable 与 RxJS</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self"><span>可观察对象(Observable)</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self"><span>RxJS 库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self"><span>Angular 中的可观察对象</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self"><span>用法实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self"><span>与其它技术的比较</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 中的模块" aria-pressed="false"><span>NgModules</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self"><span>NgModule 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self"><span>JS 模块 vs NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="告诉 Angular 如何在根 &quot;AppModule&quot; 中构造和引导应用。" target="_self"><span>应用的根模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self"><span>常用模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self"><span>特性模块的分类</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self"><span>入口组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self"><span>特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供者与 NgModule" target="_self"><span>服务提供者</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self"><span>单例服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self"><span>惰性加载的特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self"><span>共享 NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self"><span>NgModule API</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self"><span>NgModule 常见问题</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="依赖注入：创建并注入各种服务。" aria-pressed="false"><span>依赖注入</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self"><span>Angular 依赖注入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self"><span>多级注入器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供者类型的更多知识。" target="_self"><span>DI 提供者</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self"><span>DI 实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self"><span>浏览组件树</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self"><span>HttpClient</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self"><span>路由与导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 动画系统指南" aria-pressed="false"><span>动画</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self"><span>转场与触发器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self"><span>复杂序列</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self"><span>可复用动画</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self"><span>路由转场动画</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="false"><span>其它技术</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self"><span>安全</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self"><span>国际化（i18n）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/accessibility" title="设计能被所有用户访问的应用" target="_self"><span>无障碍（a11y）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false"><span>Service Worker 与 PWA</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self"><span>快速上手</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/app-shell" title="在 CLI 项目中启用应用外壳。" target="_self"><span>应用外壳</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self"><span>与 Service Worker 通讯</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self"><span>生产环境下的 Service Worker</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self"><span>Service Worker 配置</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self"><span>服务端渲染</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="false"><span>从 AngularJS 升级</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self"><span>升级步骤</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular。" target="_self"><span>更关注性能的升级方式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self"><span>AngularJS 与 Angular 的概念对照</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="使用共享库扩展 Angular" aria-pressed="false"><span>开发 Angular 库</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self"><span>库概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self"><span>使用已发布的库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular。" target="_self"><span>创建库</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解原理图" aria-pressed="false"><span>原理图（Schematic）</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics" title="理解 Angular 如何使用原理图。" target="_self"><span>原理图概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-authoring" title="理解原理图的结构。" target="_self"><span>制作原理图</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-for-libraries" title="使用原理图来把你的库集成进 Angular CLI 中。" target="_self"><span>库的原理图</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cli-builder" title="使用构建器定制 Angular CLI。" target="_self"><span>CLI 构建器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/web-worker" title="在 Angular CLI 中使用 Web Worker。" target="_self"><span>Web Worker</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="关于构建、测试和部署的信息" aria-pressed="false"><span>开发工作流</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解 AOT 预先编译器。" aria-pressed="false"><span>AOT 预先编译器</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="学习为何以及如何使用预先编译器。" target="_self"><span>预先编译</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/angular-compiler-options" title="配置 AOT 编译。" target="_self"><span>Angular 编译器选项</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-metadata-errors" title="解决 AOT 编译错误。" target="_self"><span>AOT 元数据错误</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-typecheck" title="Angular 中的模板类型检查。" target="_self"><span>模板类型检查</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self"><span>构建与运行</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bazel" title="如何配置你的环境，以利用 Bazel 进行构建和测试。" target="_self"><span>使用 Bazel 进行构建</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self"><span>测试</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self"><span>发布</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="与开发环境和工具集成起来" aria-pressed="false"><span>开发工具集成</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self"><span>语言服务</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="工作空间与项目的结构，及其配置文件。" aria-pressed="false"><span>配置</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self"><span>项目文件结构</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self"><span>工作区配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self"><span>npm 包</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self"><span>TypeScript 配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self"><span>浏览器支持</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 expanded selected ng-star-inserted" title="Angular 的版本发布实践、更新与升级。" aria-pressed="true"><span>发布信息</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self"><span>保持最新</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略及实践。" target="_self"><span>发布实践</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating-to-version-9" title="支持把你的应用从 8 升级到 9。" target="_self"><span>升级到第 9 版</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 expanded selected ng-star-inserted" style="position:relative" href="guide/deprecations" title="弃用的 Angular API 和特性汇总。" target="_self"><span>弃用清单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/ivy" title="关于 Angular Ivy 的编译与渲染管道。" target="_self"><span>Angular Ivy</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 语法、编码、术语汇总。" aria-pressed="false"><span>快捷手册</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self"><span>速查表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self"><span>风格指南</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self"><span>词汇表</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular CLI 命令参考手册。" aria-pressed="false"><span>CLI 命令</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self"><span>概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/usage-analytics-gathering" title="管理员如何从用户那里收集使用情况分析。" target="_self"><span>使用情况分析</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self"><span>ng add</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/analytics" title="ng analytics." target="_self"><span>ng analytics</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self"><span>ng build</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self"><span>ng config</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/deploy" title="ng deploy." target="_self"><span>ng deploy</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self"><span>ng doc</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self"><span>ng e2e</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self"><span>ng generate</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self"><span>ng help</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self"><span>ng lint</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self"><span>ng new</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self"><span>ng run</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self"><span>ng serve</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self"><span>ng test</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self"><span>ng update</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self"><span>ng version</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self"><span>ng xi18n</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self"><span>API 参考手册</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank"><span>互助问答</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank"><span>官方 Material 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank"><span>ng-zorro 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://devui.design/" title="“华为云” 开源的企业级组件库，核心设计思想是：致简、沉浸、灵活" target="_blank"><span>华为 DevUI 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank"><span>ng-zorro mobile 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://flutter.cn/" title="Flutter 中文文档站" target="_blank"><span>友站：Flutter 中文</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version ng-tns-c18-1"><aio-select><div class="form-select-menu"><button class="form-select-button"><span><strong></strong></span><span>stable (v9.0.0)</span></button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:261px"><main role="main" class="sidenav-content" id="guide-deprecations"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/aio/content/guide/deprecations.md?message=docs%3A%20请简述你的修改..." aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a></div><div class="content"><h1 id="deprecated-apis-and-features" translation-result="on">弃用的 API 和特性<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#deprecated-apis-and-features"><i class="material-icons">link</i></a></h1><aio-toc class="embedded" ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" aria-pressed="false">目录<mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon collapsed mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li class="h2 ng-star-inserted" title="索引"><a href="guide/deprecations#index">索引</a></li><li class="h2 ng-star-inserted" title="已弃用的 API"><a href="guide/deprecations#deprecated-apis">已弃用的 API</a></li><li class="h3 ng-star-inserted" title="@angular/common"><a href="guide/deprecations#angularcommon">@angular/common</a></li><li class="h3 secondary ng-star-inserted" title="@angular/core"><a href="guide/deprecations#angularcore">@angular/core</a></li><li class="h3 secondary ng-star-inserted" title="@angular/core/testing"><a href="guide/deprecations#angularcoretesting">@angular/core/testing</a></li><li class="h3 secondary ng-star-inserted" title="@angular/forms"><a href="guide/deprecations#angularforms">@angular/forms</a></li><li class="h3 secondary ng-star-inserted" title="@angular/router"><a href="guide/deprecations#angularrouter">@angular/router</a></li><li class="h3 secondary ng-star-inserted" title="@angular/platform-webworker"><a href="guide/deprecations#angularplatform-webworker">@angular/platform-webworker</a></li><li class="h3 secondary ng-star-inserted" title="@angular/upgrade"><a href="guide/deprecations#angularupgrade">@angular/upgrade</a></li><li class="h3 secondary ng-star-inserted" title="@angular/upgrade/static"><a href="guide/deprecations#angularupgradestatic">@angular/upgrade/static</a></li><li class="h2 secondary ng-star-inserted" title="已弃用的特性"><a href="guide/deprecations#deprecated-features">已弃用的特性</a></li><li class="h3 secondary ng-star-inserted" title="Web 跟踪框架集成"><a href="guide/deprecations#web-tracing-framework-integration">Web 跟踪框架集成</a></li><li class="h3 secondary ng-star-inserted" title="/deep/ ， >>> 和 :ng-deep 组件样式选择器"><a href="guide/deprecations#deep--and-ng-deep-component-style-selectors"><code>/deep/</code> ， <code>&gt;&gt;&gt;</code> 和 <code>:ng-deep</code> 组件样式选择器</a></li><li class="h3 secondary ng-star-inserted" title="<template> tag"><a href="guide/deprecations#template-tag">&lt;template&gt; tag</a></li><li class="h3 secondary ng-star-inserted" title="和响应式表单一起使用 ngModel"><a href="guide/deprecations#ngmodel-with-reactive-forms">和响应式表单一起使用 ngModel</a></li><li class="h3 secondary ng-star-inserted" title="ReflectiveInjector"><a href="guide/deprecations#reflectiveinjector">ReflectiveInjector</a></li><li class="h3 secondary ng-star-inserted" title="loadChildren 字符串语法"><a href="guide/deprecations#loadchildren-string-syntax">loadChildren 字符串语法</a></li><li class="h3 secondary ng-star-inserted" title="ActivatedRoute 的 params 和 queryParams 属性"><a href="guide/deprecations#activatedroute-params-and-queryparams-properties">ActivatedRoute 的 params 和 queryParams 属性</a></li><li class="h3 secondary ng-star-inserted" title="在 JIT 模式下对 reflect-metadata 腻子脚本的依赖"><a href="guide/deprecations#dependency-on-a-reflect-metadata-polyfill-in-jit-mode">在 JIT 模式下对 reflect-metadata 腻子脚本的依赖</a></li><li class="h3 secondary ng-star-inserted" title="把 @ViewChild() / @ContentChild() 静态解析为默认值"><a href="guide/deprecations#viewchild--contentchild-static-resolution-as-the-default">把 <code>@ViewChild()</code> / <code>@ContentChild()</code> 静态解析为默认值</a></li><li class="h3 secondary ng-star-inserted" title="@ContentChild() / @Input() 一起使用"><a href="guide/deprecations#contentchild--input-used-together"><code>@ContentChild()</code> / <code>@Input()</code> 一起使用</a></li><li class="h3 secondary ng-star-inserted" title="无法赋值给模板变量"><a href="guide/deprecations#cannot-assign-to-template-variables">无法赋值给模板变量</a></li><li class="h3 secondary ng-star-inserted" title="使用 Angular 特性的不带修饰器的基类"><a href="guide/deprecations#undecorated-base-classes-using-angular-features">使用 Angular 特性的不带修饰器的基类</a></li><li class="h3 secondary ng-star-inserted" title="在 platform-server 中绑定到 innerText"><a href="guide/deprecations#binding-to-innertext-in-platform-server">在 <code>platform-server</code> 中绑定到 <code>innerText</code></a></li><li class="h3 secondary ng-star-inserted" title="wtfStartTimeRange 和所有 wtf* API"><a href="guide/deprecations#wtfstarttimerange-and-all-wtf-apis"><code>wtfStartTimeRange</code> 和所有 <code>wtf*</code> API</a></li><li class="h3 secondary ng-star-inserted" title="在 Platform-Webworker 中运行 Angular 应用程序"><a href="guide/deprecations#running-angular-applications-in-platform-webworker">在 Platform-Webworker 中运行 Angular 应用程序</a></li><li class="h3 secondary ng-star-inserted" title="不再需要 entryComponents 和 ANALYZE_FOR_ENTRY_COMPONENTS"><a href="guide/deprecations#entrycomponents-and-analyze_for_entry_components-no-longer-required">不再需要 <code>entryComponents</code> 和 <code>ANALYZE_FOR_ENTRY_COMPONENTS</code></a></li><li class="h3 secondary ng-star-inserted" title="不带泛型的 ModuleWithProviders 类型"><a href="guide/deprecations#modulewithproviders-type-without-a-generic">不带泛型的 <code>ModuleWithProviders</code> 类型</a></li><li class="h3 secondary ng-star-inserted" title="@angular/* npm 软件包中的 esm5 和 fesm5 代码格式"><a href="guide/deprecations#esm5-and-fesm5-code-formats-in-angular-npm-packages">@angular/* npm 软件包中的 <code>esm5</code> 和 <code>fesm5</code> 代码格式</a></li><li class="h2 secondary ng-star-inserted" title="已删除的 API"><a href="guide/deprecations#removed-apis">已删除的 API</a></li><li class="h3 secondary ng-star-inserted" title="@angular/http"><a href="guide/deprecations#angularhttp">@angular/http</a></li></ul><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" aria-pressed="false"></button></div></aio-toc><h1 translation-origin="off" id="deprecated-apis-and-features">Deprecated APIs and features<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#deprecated-apis-and-features"><i class="material-icons">link</i></a></h1><p translation-result="on">Angular 力图兼顾创新与稳定。但有时，API 和特性已经过时，需要进行删除或替换，以便 Angular 可以及时跟上新的最佳实践、依赖项变更或者 Web 平台自身的变化。</p><p translation-origin="off">Angular strives to balance innovation and stability. Sometimes, APIs and features become obsolete and need to be removed or replaced so that Angular can stay current with new best practices, changing dependencies, or changes in the (web) platform itself.</p><p translation-result="on">为了让这些转换变得尽可能简单，我们会在删除 API 和特性之前先弃用它们一段时间。让你有时间把应用更新到最新的 API 和最佳实践。</p><p translation-origin="off">To make these transitions as easy as possible, we deprecate APIs and features for a period of time before removing them. This gives you time to update your apps to the latest APIs and best practices.</p><p translation-result="on">本指南包含了当前不推荐使用的所有 Angular API 和特性的汇总表。</p><p translation-origin="off">This guide contains a summary of all Angular APIs and features that are currently deprecated.</p><div class="alert is-helpful"><p translation-result="on">v6 或更早版本中已弃用的特性和 API 将会在版本 9 或更高级版本中删除。要了解 Angular 中关于弃用和删除的实践，参见<a href="guide/releases#deprecation-practices" title="Angular 发布实践：弃用实践">Angular 发布实践</a> 。</p><p translation-origin="off">Features and APIs that were deprecated in v6 or earlier are candidates for removal in version 9 or any later major version. For information about Angular's deprecation and removal practices, see <a href="guide/releases#deprecation-practices" title="Angular Release Practices: Deprecation practices">Angular Release Practices</a>.</p><p translation-result="on">有关如何更新到最新 Angular 版本的分步说明，参见 <a href="https://update.angular.io">update.angular.io</a> 上的交互式更新指南。</p><p translation-origin="off">For step-by-step instructions on how to update to the latest Angular release, use the interactive update guide at <a href="https://update.angular.io">update.angular.io</a>.</p></div><h2 id="index" translation-result="on">索引<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#index"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="index">Index<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#index"><i class="material-icons">link</i></a></h2><p translation-result="on">为了帮助您确保应用程序的前瞻性，下表列出了所有已弃用的 API 和功能，这些 API 和功能按发行版进行组织，它们将被删除。每个条目都链接到本指南后面的部分，该部分描述了弃用原因和替换选项。</p><p translation-origin="off">To help you future-proof your apps, the following table lists all deprecated APIs and features, organized by the release in which they are candidates for removal. Each item is linked to the section later in this guide that describes the deprecation reason and replacement options.</p><table><thead><tr><th><p translation-result="on">区域</p><p translation-origin="off">Area</p></th><th><p translation-result="on">API 或特性</p><p translation-origin="off">API or Feature</p></th><th><p translation-result="on">可能会在什么时候移除</p><p translation-origin="off">May be removed in</p></th></tr></thead><tbody><tr><td><code>@angular/common</code></td><td><a href="guide/deprecations#reflectiveinjector"><code>ReflectiveInjector</code></a></td><td>v10</td></tr><tr><td><code>@angular/common</code></td><td><a href="api/common/CurrencyPipe#currency-code-deprecation"><code>CurrencyPipe</code> - <code>DEFAULT_CURRENCY_CODE</code></a></td><td>v11</td></tr><tr><td><code>@angular/core</code></td><td><a href="guide/deprecations#core"><code>CollectionChangeRecord</code></a></td><td>v10</td></tr><tr><td><code>@angular/core</code></td><td><a href="guide/deprecations#core"><code>DefaultIterableDiffer</code></a></td><td>v10</td></tr><tr><td><code>@angular/core</code></td><td><a href="guide/deprecations#core"><code>ReflectiveKey</code></a></td><td>v10</td></tr><tr><td><code>@angular/core</code></td><td><a href="guide/deprecations#core"><code>RenderComponentType</code></a></td><td>v10</td></tr><tr><td><code>@angular/core</code></td><td><a href="guide/deprecations#core"><code>ViewEncapsulation.Native</code></a></td><td>v10</td></tr><tr><td><code>@angular/core</code></td><td><p translation-result="on"><a href="guide/deprecations#moduleWithProviders">不带泛型的 <code>ModuleWithProviders</code></a></p><p translation-origin="off"><a href="guide/deprecations#moduleWithProviders"><code>ModuleWithProviders</code> without a generic</a></p></td><td><p>v10</p><p>v10</p></td></tr><tr><td><code>@angular/core</code></td><td><p translation-result="on"><a href="guide/deprecations#undecorated-base-classes">使用 Angular 特性的不带装饰器的基类</a></p><p translation-origin="off"><a href="guide/deprecations#undecorated-base-classes">Undecorated base classes that use Angular features</a></p></td><td><p>v10</p><p>v10</p></td></tr><tr><td><code>@angular/forms</code></td><td><p translation-result="on"><a href="guide/deprecations#ngmodel-reactive">响应式表单中的 <code>ngModel</code></a></p><p translation-origin="off"><a href="guide/deprecations#ngmodel-reactive"><code>ngModel</code> with reactive forms</a></p></td><td><p>v10</p><p>v10</p></td></tr><tr><td><code>@angular/router</code></td><td><a href="guide/deprecations#router"><code>preserveQueryParams</code></a></td><td>v10</td></tr><tr><td><code>@angular/upgrade</code></td><td><a href="guide/deprecations#upgrade"><code>@angular/upgrade</code></a></td><td>v10</td></tr><tr><td><code>@angular/upgrade</code></td><td><a href="guide/deprecations#upgrade-static"><code>getAngularLib</code></a></td><td>v10</td></tr><tr><td><code>@angular/upgrade</code></td><td><a href="guide/deprecations#upgrade-static"><code>setAngularLib</code></a></td><td>v10</td></tr><tr><td><code>@angular/platform-webworker</code></td><td><p translation-result="on"><a href="api/platform-webworker">所有入口点</a></p><p translation-origin="off"><a href="api/platform-webworker">All entry points</a></p></td><td><p>v10&nbsp;</p><p>v10</p></td></tr><tr><td><p translation-result="on">模板语法</p><p translation-origin="off">template syntax</p></td><td><p><a href="guide/deprecations#template-tag"><code>&lt;template</code>&gt;</a></p><p><a href="guide/deprecations#template-tag"><code>&lt;template</code> &gt;</a></p></td><td><p>v10</p><p>v10</p></td></tr><tr><td><p translation-result="on">腻子脚本</p><p translation-origin="off">polyfills</p></td><td><a href="guide/deprecations#reflect-metadata">reflect-metadata</a></td><td><p>v10</p><p>v10</p></td></tr><tr><td><p translation-result="on">npm 软件包格式</p><p translation-origin="off">npm package format</p></td><td><p translation-result="on"><a href="guide/deprecations#esm5-fesm5">@angular/* npm 软件包中的 <code>esm5</code> 和 <code>fesm5</code> 入口点</a></p><p translation-origin="off"><a href="guide/deprecations#esm5-fesm5"><code>esm5</code> and <code>fesm5</code> entry-points in @angular/* npm packages</a></p></td><td><p>v10</p><p>v10</p></td></tr><tr><td><code>@angular/core</code></td><td><a href="guide/deprecations#core"><code>defineInjectable</code></a></td><td>v11</td></tr><tr><td><code>@angular/core</code></td><td><a href="api/core/NgModule#entryComponents"><code>entryComponents</code></a></td><td>v11</td></tr><tr><td><code>@angular/core</code></td><td><a href="api/core/ANALYZE_FOR_ENTRY_COMPONENTS"><code>ANALYZE_FOR_ENTRY_COMPONENTS</code></a></td><td>v11</td></tr><tr><td><code>@angular/router</code></td><td><p translation-result="on"><a href="guide/deprecations#loadChildren"><code>loadChildren</code> 字符串语法</a></p><p translation-origin="off"><a href="guide/deprecations#loadChildren"><code>loadChildren</code> string syntax</a></p></td><td><p>v11</p><p>v11</p></td></tr><tr><td><code>@angular/core/testing</code></td><td><a href="guide/deprecations#testing"><code>TestBed.get</code></a></td><td>v12</td></tr><tr><td><code>@angular/router</code></td><td><p translation-result="on"><a href="guide/deprecations#activatedroute-props"><code>ActivatedRoute</code> 参数和 <code>queryParams</code> 属性</a></p><p translation-origin="off"><a href="guide/deprecations#activatedroute-props"><code>ActivatedRoute</code> params and <code>queryParams</code> properties</a></p></td><td><p translation-result="on">未定</p><p translation-origin="off">unspecified</p></td></tr><tr><td><p translation-result="on">模板语法</p><p translation-origin="off">template syntax</p></td><td><p translation-result="on"><a href="guide/deprecations#deep-component-style-selector"><code>/deep/</code>，<code>&gt;&gt;&gt;</code> 和 <code>::ng-deep</code></a></p><p translation-origin="off"><a href="guide/deprecations#deep-component-style-selector"><code>/deep/</code>, <code>&gt;&gt;&gt;</code>, and <code>::ng-deep</code></a></p></td><td><p translation-result="on">未定</p><p translation-origin="off">unspecified</p></td></tr></tbody></table><h2 id="deprecated-apis" translation-result="on">已弃用的 API<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#deprecated-apis"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="deprecated-apis">Deprecated APIs<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#deprecated-apis"><i class="material-icons">link</i></a></h2><p translation-result="on">本节包含所有当前已弃用的 API 的完整列表，其中包含一些可帮助你规划如何迁移到其替代品的详细信息。</p><p translation-origin="off">This section contains a complete list all of the currently-deprecated APIs, with details to help you plan your migration to a replacement.</p><div class="alert is-helpful"><p translation-result="on">提示：在本文档站的 <a href="api">API参考手册部分</a>，不推荐使用的 API 会用<del>删除线</del>标记出来。你可以按<a href="api?status=deprecated"><strong>状态</strong>: 已弃用</a>来过滤 API 列表。</p><p translation-origin="off">Tip: In the <a href="api">API reference section</a> of this doc site, deprecated APIs are indicated by <del>strikethrough.</del> You can filter the API list by <a href="api?status=deprecated"><strong>Status: deprecated</strong></a>.</p></div><a id="common"></a><h3 id="angularcommon">@angular/common<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#angularcommon"><i class="material-icons">link</i></a></h3><table><thead><tr><th>API</th><th>Replacement</th><th>Deprecation announced</th><th>Notes</th></tr></thead><tbody><tr><td><a href="api/common/CurrencyPipe#currency-code-deprecation"><code>CurrencyPipe</code> - <code>DEFAULT_CURRENCY_CODE</code></a></td><td><code>{provide: <a href="api/core/DEFAULT_CURRENCY_CODE" class="code-anchor">DEFAULT_CURRENCY_CODE</a>, <a href="api/core/ValueSansProvider#useValue" class="code-anchor">useValue</a>: 'USD'}</code></td><td>v9</td><td><p translation-result="on">从 v11 开始，默认代码将从由 <code>LOCAL_ID</code> 提供的语言环境数据中提取，而不再是固定值 <code>USD</code>。</p><p translation-origin="off">From v11 the default code will be extracted from the locale data given by <code>LOCAL_ID</code>, rather than <code>USD</code>.</p></td></tr></tbody></table><a id="core"></a><h3 id="angularcore">@angular/core<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#angularcore"><i class="material-icons">link</i></a></h3><table><thead><tr><th>API</th><th><p translation-result="on">替代品</p><p translation-origin="off">Replacement</p></th><th><p translation-result="on">宣布弃用</p><p translation-origin="off">Deprecation announced</p></th><th><p translation-result="on">备注</p><p translation-origin="off">Notes</p></th></tr></thead><tbody><tr><td><a href="api/core/CollectionChangeRecord"><code>CollectionChangeRecord</code></a></td><td><a href="api/core/IterableChangeRecord"><code>IterableChangeRecord</code></a></td><td>v4</td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td></tr><tr><td><a href="api/core/DefaultIterableDiffer"><code>DefaultIterableDiffer</code></a></td><td><p translation-result="on">不适用</p><p translation-origin="off">n/a</p></td><td>v4</td><td><p translation-result="on">不属于公共API。</p><p translation-origin="off">Not part of public API.</p></td></tr><tr><td><a href="api/core/ReflectiveInjector"><code>ReflectiveInjector</code></a></td><td><a href="api/core/Injector#create"><code>Injector.create</code></a></td><td>v5</td><td><p translation-result="on">参见 <a href="guide/deprecations#reflectiveinjector"><code>ReflectiveInjector</code></a></p><p translation-origin="off">See <a href="guide/deprecations#reflectiveinjector"><code>ReflectiveInjector</code></a></p></td></tr><tr><td><a href="api/core/ReflectiveKey"><code>ReflectiveKey</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td>v5</td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td></tr><tr><td><a href="api/core/ViewEncapsulation#Native"><code>ViewEncapsulation.Native</code></a></td><td><a href="api/core/ViewEncapsulation#ShadowDom"><code>ViewEncapsulation.ShadowDom</code></a></td><td>v6</td><td><p translation-result="on">使用渲染器的原生封装机制。参见 <a href="https://github.com/angular/angular/blob/3e992e18ebf51d6036818f26c3d77b52d3ec48eb/packages/core/src/metadata/view.ts#L32">view.ts。</a></p><p translation-origin="off">Use the native encapsulation mechanism of the renderer. See <a href="https://github.com/angular/angular/blob/3e992e18ebf51d6036818f26c3d77b52d3ec48eb/packages/core/src/metadata/view.ts#L32">view.ts</a>.</p></td></tr><tr><td><a href="api/core/defineInjectable"><code>defineInjectable</code></a></td><td><code>ɵɵ<a href="api/core/defineInjectable" class="code-anchor">defineInjectable</a></code></td><td>v8</td><td><p translation-result="on">仅在生成的代码中使用。任何源代码都不应依赖此API。</p><p translation-origin="off">Used only in generated code. No source code should depend on this API.</p></td></tr><tr><td><a href="api/core/NgModule#entryComponents"><code>entryComponents</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td>v9</td><td><p translation-result="on">参见 <a href="guide/deprecations#entryComponents"><code>entryComponents</code></a></p><p translation-origin="off">See <a href="guide/deprecations#entryComponents"><code>entryComponents</code></a></p></td></tr><tr><td><a href="api/core/ANALYZE_FOR_ENTRY_COMPONENTS"><code>ANALYZE_FOR_ENTRY_COMPONENTS</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td>v9</td><td><p translation-result="on">参见 <a href="guide/deprecations#entryComponents"><code>ANALYZE_FOR_ENTRY_COMPONENTS</code></a></p><p translation-origin="off">See <a href="guide/deprecations#entryComponents"><code>ANALYZE_FOR_ENTRY_COMPONENTS</code></a></p></td></tr><tr><td><p translation-result="on">不带泛型的<code><a href="api/core/ModuleWithProviders" class="code-anchor">ModuleWithProviders</a></code></p><p translation-origin="off"><code><a href="api/core/ModuleWithProviders" class="code-anchor">ModuleWithProviders</a></code> without a generic</p></td><td><p translation-result="on">带泛型的 <code><a href="api/core/ModuleWithProviders" class="code-anchor">ModuleWithProviders</a></code></p><p translation-origin="off"><code><a href="api/core/ModuleWithProviders" class="code-anchor">ModuleWithProviders</a></code> with a generic</p></td><td>v9</td><td><p translation-result="on">参见 <a href="guide/deprecations#moduleWithProviders"><code>ModuleWithProviders</code>部分</a></p><p translation-origin="off">See <a href="guide/deprecations#moduleWithProviders"><code>ModuleWithProviders</code> section</a></p></td></tr><tr><td><p translation-result="on">使用 Angular 功能的不带装饰器的基类</p><p translation-origin="off">Undecorated base classes that use Angular features</p></td><td><p translation-result="on">具有 Angular 功能的带 <code>@<a href="api/core/Directive" class="code-anchor">Directive</a>()</code> 装饰器的基类</p><p translation-origin="off">Base classes with <code>@<a href="api/core/Directive" class="code-anchor">Directive</a>()</code> decorator that use Angular features</p></td><td>v9</td><td><p translation-result="on">请参见<a href="guide/deprecations#undecorated-base-classes">不带装饰器的基类部分</a></p><p translation-origin="off">See <a href="guide/deprecations#undecorated-base-classes">undecorated base classes section</a></p></td></tr></tbody></table><a id="testing"></a><h3 id="angularcoretesting">@angular/core/testing<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#angularcoretesting"><i class="material-icons">link</i></a></h3><table><thead><tr><th>API</th><th><p translation-result="on">替代品</p><p translation-origin="off">Replacement</p></th><th><p translation-result="on">宣布弃用</p><p translation-origin="off">Deprecation announced</p></th><th><p translation-result="on">备注</p><p translation-origin="off">Notes</p></th></tr></thead><tbody><tr><td><a href="api/core/testing/TestBed#get"><code>TestBed.get</code></a></td><td><a href="api/core/testing/TestBed#inject"><code>TestBed.inject</code></a></td><td>v9</td><td><p translation-result="on">行为相同，但类型安全。</p><p translation-origin="off">Same behavior, but type safe.</p></td></tr></tbody></table><a id="forms"></a><h3 id="angularforms">@angular/forms<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#angularforms"><i class="material-icons">link</i></a></h3><table><thead><tr><th>API</th><th><p translation-result="on">替代品</p><p translation-origin="off">Replacement</p></th><th><p translation-result="on">宣布弃用</p><p translation-origin="off">Deprecation announced</p></th><th><p translation-result="on">备注</p><p translation-origin="off">Notes</p></th></tr></thead><tbody><tr><td><p translation-result="on"><a href="guide/deprecations#ngmodel-reactive">响应式表单中的 <code>ngModel</code></a></p><p translation-origin="off"><a href="guide/deprecations#ngmodel-reactive"><code>ngModel</code> with reactive forms</a></p></td><td><p translation-result="on">参见 <a href="api/forms/FormControlDirective#use-with-ngmodel">FormControlDirective 使用说明</a></p><p translation-origin="off">See <a href="api/forms/FormControlDirective#use-with-ngmodel">FormControlDirective usage notes</a></p></td><td>v6</td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td></tr></tbody></table><a id="router"></a><h3 id="angularrouter">@angular/router<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#angularrouter"><i class="material-icons">link</i></a></h3><table><thead><tr><th>API</th><th><p translation-result="on">替代品</p><p translation-origin="off">Replacement</p></th><th><p translation-result="on">宣布弃用</p><p translation-origin="off">Deprecation announced</p></th><th><p translation-result="on">备注</p><p translation-origin="off">Notes</p></th></tr></thead><tbody><tr><td><a href="api/router/NavigationExtras#preserveQueryParams"><code>preserveQueryParams</code></a></td><td><a href="api/router/NavigationExtras#queryParamsHandling"><code>queryParamsHandling</code></a></td><td>v4</td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td></tr></tbody></table><a id="platform-webworker"></a><h3 id="angularplatform-webworker">@angular/platform-webworker<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#angularplatform-webworker"><i class="material-icons">link</i></a></h3><table><thead><tr><th>API</th><th><p translation-result="on">替代品</p><p translation-origin="off">Replacement</p></th><th><p translation-result="on">宣布弃用</p><p translation-origin="off">Deprecation announced</p></th><th><p translation-result="on">备注</p><p translation-origin="off">Notes</p></th></tr></thead><tbody><tr><td><p translation-result="on"><a href="api/upgrade">所有入口点</a></p><p translation-origin="off"><a href="api/upgrade">All entry points</a></p></td><td><a href="api/upgrade/static"><code>@angular/upgrade/static</code></a></td><td>v5</td><td><p translation-result="on">参见<a href="guide/upgrade">从 AngularJS 升级</a> 。</p><p translation-origin="off">See <a href="guide/upgrade">Upgrading from AngularJS</a>.</p></td></tr></tbody></table><a id="upgrade"></a><h3 id="angularupgrade">@angular/upgrade<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#angularupgrade"><i class="material-icons">link</i></a></h3><table><thead><tr><th>API</th><th><p translation-result="on">替代品</p><p translation-origin="off">Replacement</p></th><th><p translation-result="on">宣布弃用</p><p translation-origin="off">Deprecation announced</p></th><th><p translation-result="on">备注</p><p translation-origin="off">Notes</p></th></tr></thead><tbody><tr><td><p translation-result="on"><a href="api/upgrade">所有入口点</a></p><p translation-origin="off"><a href="api/upgrade">All entry points</a></p></td><td><a href="api/upgrade/static"><code>@angular/upgrade/static</code></a></td><td>v5</td><td><p translation-result="on">参见 <a href="guide/upgrade">从 AngularJS 升级</a> 。</p><p translation-origin="off">See <a href="guide/upgrade">Upgrading from AngularJS</a>.</p></td></tr></tbody></table><a id="upgrade-static"></a><h3 id="angularupgradestatic">@angular/upgrade/static<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#angularupgradestatic"><i class="material-icons">link</i></a></h3><table><thead><tr><th>API</th><th><p translation-result="on">替代品</p><p translation-origin="off">Replacement</p></th><th><p translation-result="on">宣布弃用</p><p translation-origin="off">Deprecation announced</p></th><th><p translation-result="on">备注</p><p translation-origin="off">Notes</p></th></tr></thead><tbody><tr><td><a href="api/upgrade/static/getAngularLib"><code>getAngularLib</code></a></td><td><a href="api/upgrade/static/getAngularJSGlobal"><code>getAngularJSGlobal</code></a></td><td>v5</td><td><p translation-result="on">参见<a href="guide/upgrade">从 AngularJS 升级</a> 。</p><p translation-origin="off">See <a href="guide/upgrade">Upgrading from AngularJS</a>.</p></td></tr><tr><td><a href="api/upgrade/static/setAngularLib"><code>setAngularLib</code></a></td><td><a href="api/upgrade/static/setAngularJSGlobal"><code>setAngularJSGlobal</code></a></td><td>v5</td><td><p translation-result="on">参见<a href="guide/upgrade">从 AngularJS 升级</a> 。</p><p translation-origin="off">See <a href="guide/upgrade">Upgrading from AngularJS</a>.</p></td></tr></tbody></table><a id="deprecated-features"></a><h2 id="deprecated-features" translation-result="on">已弃用的特性<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#deprecated-features"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="deprecated-features">Deprecated features<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#deprecated-features"><i class="material-icons">link</i></a></h2><p translation-result="on">本节列出了所有当前已弃用的特性，包括模板语法、配置选项，以及前面<a href="guide/deprecations#deprecated-apis">已弃用的 API </a>部分未列出的其它弃用。它还包括已弃用的 API 用例或 API 组合，以增强上述信息。</p><p translation-origin="off">This section lists all of the currently-deprecated features, which includes template syntax, configuration options, and any other deprecations not listed in the <a href="guide/deprecations#deprecated-apis">Deprecated APIs</a> section above. It also includes deprecated API usage scenarios or API combinations, to augment the information above.</p><a id="wtf"></a><h3 id="web-tracing-framework-integration" translation-result="on">Web 跟踪框架集成<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#web-tracing-framework-integration"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="web-tracing-framework-integration">Web Tracing Framework integration<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#web-tracing-framework-integration"><i class="material-icons">link</i></a></h3><p translation-result="on">Angular 以前支持与 <a href="https://google.github.io/tracing-framework/">Web 跟踪框架（WTF）</a>集成，用于 Angular 应用程序的性能测试。此集成已经停止维护并失效。因此，该集成在 Angular 版本 8 中被弃用，并且由于没有证据表明在版本 9 中删除了任何现有用法。</p><p translation-origin="off">Angular previously has supported an integration with the <a href="https://google.github.io/tracing-framework/">Web Tracing Framework (WTF)</a> for performance testing of Angular applications. This integration has not been maintained and defunct. As a result, the integration was deprecated in Angular version 8 and due to no evidence of any existing usage removed in version 9.</p><a id="deep-component-style-selector"></a><h3 id="deep--and-ng-deep-component-style-selectors" translation-result="on"><code>/deep/</code> ， <code>&gt;&gt;&gt;</code> 和 <code>:ng-deep</code> 组件样式选择器<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#deep--and-ng-deep-component-style-selectors"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="deep--and-ng-deep-component-style-selectors"><code>/deep/</code>, <code>&gt;&gt;&gt;</code> and <code>:ng-deep</code> component style selectors<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#deep--and-ng-deep-component-style-selectors"><i class="material-icons">link</i></a></h3><p translation-result="on">刺穿 Shadow DOM 的 CSS 组合符已经弃用，并且<a href="https://developers.google.com/web/updates/2017/10/remove-shadow-piercing">主要的浏览器和工具都已删除它</a>。因此，在 v4 中，Angular 也弃用了对 <code>/deep/</code>，<code>&gt;&gt;&gt;</code> 和 <code>::ng-deep</code> 的支持。在彻底删除它之前，我们首选<code>::ng-deep</code> ，以便和各种工具实现更广泛的兼容。</p><p translation-origin="off">The shadow-dom-piercing descendant combinator is deprecated and support is being <a href="https://developers.google.com/web/updates/2017/10/remove-shadow-piercing">removed from major browsers and tools</a>. As such, in v4 we deprecated support in Angular for all 3 of <code>/deep/</code>, <code>&gt;&gt;&gt;</code> and <code>::ng-deep</code>. Until removal, <code>::ng-deep</code> is preferred for broader compatibility with the tools.</p><p translation-result="on">欲知详情，参阅“组件样式”一章中的 <a href="guide/component-styles#deprecated-deep--and-ng-deep" title="“组件样式”指南，代号为deep和ngdeep">/deep/，&gt;&gt;&gt; 和 :: ng-deep</a>。</p><p translation-origin="off">For more information, see <a href="guide/component-styles#deprecated-deep--and-ng-deep" title="Component Styles guide, Deprecated deep and ngdeep">/deep/, &gt;&gt;&gt;, and ::ng-deep</a> in the Component Styles guide.</p><a id="template-tag"></a><h3 id="template-tag">&lt;template&gt; tag<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#template-tag"><i class="material-icons">link</i></a></h3><p translation-result="on"><code>&lt;template&gt;</code> 标签在 v4 中已经弃用，以消除和 DOM 中同名元素的冲突（比如在使用 Web Components 时）。请用 <code>&lt;ng-template&gt;</code> 代替。欲知详情，参见<a href="guide/angular-compiler-options#enablelegacytemplate">预先编译</a>一章。</p><p translation-origin="off">The <code>&lt;template&gt;</code> tag was deprecated in v4 to avoid colliding with the DOM's element of the same name (such as when using web components). Use <code>&lt;ng-template&gt;</code> instead. For more information, see the <a href="guide/angular-compiler-options#enablelegacytemplate">Ahead-of-Time Compilation</a> guide.</p><a id="ngmodel-reactive"></a><h3 id="ngmodel-with-reactive-forms" translation-result="on">和响应式表单一起使用 ngModel<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#ngmodel-with-reactive-forms"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="ngmodel-with-reactive-forms">ngModel with reactive forms<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#ngmodel-with-reactive-forms"><i class="material-icons">link</i></a></h3><p translation-result="on">版本 6 中已弃用：和响应式表单指令一起使用 <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> 和 <code>ngModelChange</code>。</p><p translation-origin="off">Support for using the <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> input property and <code>ngModelChange</code> event with reactive form directives was deprecated in version 6.</p><p translation-result="on">欲知详情，请参阅 <a href="api/forms/FormControlDirective#use-with-ngmodel"><code>FormControlDirective</code></a>和 <a href="api/forms/FormControlName#use-with-ngmodel"><code>FormControlName</code></a>的用法说明部分。</p><p translation-origin="off">For more information, see the usage notes for <a href="api/forms/FormControlDirective#use-with-ngmodel"><code>FormControlDirective</code></a>and <a href="api/forms/FormControlName#use-with-ngmodel"><code>FormControlName</code></a>.</p><a id="reflectiveinjector"></a><h3 id="reflectiveinjector">ReflectiveInjector<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#reflectiveinjector"><i class="material-icons">link</i></a></h3><p translation-result="on">在 v5 中，Angular 用 <code>StaticInjector</code> 代替了 <code><a href="api/core/ReflectiveInjector" class="code-anchor">ReflectiveInjector</a></code>。该注入器不再需要 Reflect 的腻子脚本，对大部分开发人员来说都显著减小了应用的体积。</p><p translation-origin="off">In v5, Angular replaced the <code><a href="api/core/ReflectiveInjector" class="code-anchor">ReflectiveInjector</a></code> with the <code>StaticInjector</code>. The injector no longer requires the Reflect polyfill, reducing application size for most developers.</p><p translation-result="on">之前：</p><p translation-origin="off">Before:</p><code-example ng-version="9.0.0-rc.11"><div style="display:none">ReflectiveInjector.resolveAndCreate(providers);</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="typ">ReflectiveInjector</span><span class="pun">.</span><span class="pln">resolveAndCreate</span><span class="pun">(</span><span class="pln">providers</span><span class="pun">);</span></code>
    </pre></aio-code></code-example><p translation-result="on">之后：</p><p translation-origin="off">After:</p><code-example ng-version="9.0.0-rc.11"><div style="display:none">Injector.create({providers});</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="typ">Injector</span><span class="pun">.</span><span class="pln">create</span><span class="pun">({</span><span class="pln">providers</span><span class="pun">});</span></code>
    </pre></aio-code></code-example><a id="loadChildren"></a><h3 id="loadchildren-string-syntax" translation-result="on">loadChildren 字符串语法<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#loadchildren-string-syntax"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="loadchildren-string-syntax">loadChildren string syntax<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#loadchildren-string-syntax"><i class="material-icons">link</i></a></h3><p translation-result="on">当 Angular 第一次引入惰性路由时，还没有浏览器能支持动态加载额外的 JavaScript。因此 Angular 创建了自己的方案，所用的语法是 <code><a href="api/router/Route#loadChildren" class="code-anchor">loadChildren</a>: './lazy/lazy.module#LazyModule'</code> 并且还构建了一些工具来支持它。现在，很多浏览器都已支持 ECMAScript 的动态导入，Angular 也正朝着这个新语法前进。</p><p translation-origin="off">When Angular first introduced lazy routes, there wasn't browser support for dynamically loading additional JavaScript. Angular created our own scheme using the syntax <code><a href="api/router/Route#loadChildren" class="code-anchor">loadChildren</a>: './lazy/lazy.module#LazyModule'</code> and built tooling to support it. Now that ECMAScript dynamic import is supported in many browsers, Angular is moving toward this new syntax.</p><p translation-result="on">在第 8 版中，不推荐使用 <a href="api/router/LoadChildren"><code>loadChildren</code></a>路由规范的字符串语法，<a href="api/router/LoadChildren"><code>loadChildren</code></a>支持使用基于 <code>import()</code> 的新语法。</p><p translation-origin="off">In version 8, the string syntax for the <a href="api/router/LoadChildren"><code>loadChildren</code></a>route specification was deprecated, in favor of new syntax that uses <code>import()</code> syntax.</p><p translation-result="on">之前：</p><p translation-origin="off">Before:</p><code-example ng-version="9.0.0-rc.11"><div style="display:none">const routes: <a href="api/router/Routes" class="code-anchor">Routes</a> = [{ path: 'lazy', // The following string syntax for <a href="api/router/Route#loadChildren" class="code-anchor">loadChildren</a> is deprecated <a href="api/router/Route#loadChildren" class="code-anchor">loadChildren</a>: './lazy/lazy.module#LazyModule' }];</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">const</span><span class="pln"> routes</span><span class="pun">:</span><span class="pln"> </span><a href="api/router/Routes" class="code-anchor"><span class="typ">Routes</span></a><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
  path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'lazy'</span><span class="pun">,</span><span class="pln">
  </span><span class="com">// The following string syntax for </span><a href="api/router/Route#loadChildren" class="code-anchor"><span class="com">loadChildren</span></a><span class="com"> is deprecated</span><span class="pln">
  </span><a href="api/router/Route#loadChildren" class="code-anchor"><span class="pln">loadChildren</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'./lazy/lazy.module#LazyModule'</span><span class="pln">
</span><span class="pun">}];</span></code>
    </pre></aio-code></code-example><p translation-result="on">之后：</p><p translation-origin="off">After:</p><code-example ng-version="9.0.0-rc.11"><div style="display:none">const routes: <a href="api/router/Routes" class="code-anchor">Routes</a> = [{ path: 'lazy', // The new import() syntax <a href="api/router/Route#loadChildren" class="code-anchor">loadChildren</a>: () =&gt; import('./lazy/lazy.module').then(m =&gt; m.LazyModule) }];</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">const</span><span class="pln"> routes</span><span class="pun">:</span><span class="pln"> </span><a href="api/router/Routes" class="code-anchor"><span class="typ">Routes</span></a><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
  path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'lazy'</span><span class="pun">,</span><span class="pln">
  </span><span class="com">// The new import() syntax</span><span class="pln">
  </span><a href="api/router/Route#loadChildren" class="code-anchor"><span class="pln">loadChildren</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="kwd">import</span><span class="pun">(</span><span class="str">'./lazy/lazy.module'</span><span class="pun">).</span><span class="kwd">then</span><span class="pun">(</span><span class="pln">m </span><span class="pun">=&gt;</span><span class="pln"> m</span><span class="pun">.</span><span class="typ">LazyModule</span><span class="pun">)</span><span class="pln">
</span><span class="pun">}];</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on"><strong>版本 8 更新</strong>：当你升级到版本 8 时，<a href="cli/update"><code>ng update</code></a>命令会自动执行转换。在版本 7 之前，<code>import()</code> 语法只能在 JIT 模式下运行（和视图引擎一起）。</p><p translation-origin="off"><strong>Version 8 update</strong>: When you update to version 8, the <a href="cli/update"><code>ng update</code></a>command performs the transformation automatically. Prior to version 7, the <code>import()</code> syntax only works in JIT mode (with view engine).</p></div><div class="alert is-helpful"><p translation-result="on"><strong>声明语法</strong>：遵循路由声明语法 <code><a href="api/router/Route#loadChildren" class="code-anchor">loadChildren</a>: () =&gt; import('...').then(m =&gt; m.ModuleName)</code> 是很重要的，这样 <code>ngc</code> 才能发现这个惰性加载模块及其相关的 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code>。你可以在<a href="https://github.com/angular/angular-cli/blob/a491b09800b493fe01301387fa9a025f7c7d4808/packages/ngtools/webpack/src/transformers/import_factory.ts#L104-L113">这里</a>找到受支持的语法的完整列表。在 Ivy 发布后会放松这种限制，因为 Ivy 不再用 <code>NgFactories</code> 了。</p><p translation-origin="off"><strong>Declaration syntax</strong>: It's important to follow the route declaration syntax <code><a href="api/router/Route#loadChildren" class="code-anchor">loadChildren</a>: () =&gt; import('...').then(m =&gt; m.ModuleName)</code> to allow <code>ngc</code> to discover the lazy-loaded module and the associated <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code>. You can find the complete list of allowed syntax constructs <a href="https://github.com/angular/angular-cli/blob/a491b09800b493fe01301387fa9a025f7c7d4808/packages/ngtools/webpack/src/transformers/import_factory.ts#L104-L113">here</a>. These restrictions will be relaxed with the release of Ivy since it'll no longer use <code>NgFactories</code>.</p></div><a id="activatedroute-props"></a><h3 id="activatedroute-params-and-queryparams-properties" translation-result="on">ActivatedRoute 的 params 和 queryParams 属性<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#activatedroute-params-and-queryparams-properties"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="activatedroute-params-and-queryparams-properties">ActivatedRoute params and queryParams properties<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#activatedroute-params-and-queryparams-properties"><i class="material-icons">link</i></a></h3><p translation-result="on"><a href="api/router/ActivatedRoute">ActivatedRoute</a> 包含两个<a href="api/router/ActivatedRoute#properties">属性</a> ，它们的能力低于它们的替代品，在将来的 Angular 版本中可能会弃用。</p><p translation-origin="off"><a href="api/router/ActivatedRoute">ActivatedRoute</a> contains two <a href="api/router/ActivatedRoute#properties">properties</a> that are less capable than their replacements and may be deprecated in a future Angular version.</p><table><thead><tr><th><p translation-result="on">属性</p><p translation-origin="off">Property</p></th><th><p translation-result="on">替代品</p><p translation-origin="off">Replacement</p></th></tr></thead><tbody><tr><td><code>params</code></td><td><code>paramMap</code></td></tr><tr><td><code>queryParams</code></td><td><code>queryParamMap</code></td></tr></tbody></table><p translation-result="on">欲知详情，参见<a href="guide/router#activated-route">路由器指南</a> 。</p><p translation-origin="off">For more information see the <a href="guide/router#activated-route">Router guide</a>.</p><a id="reflect-metadata"></a><h3 id="dependency-on-a-reflect-metadata-polyfill-in-jit-mode" translation-result="on">在 JIT 模式下对 reflect-metadata 腻子脚本的依赖<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#dependency-on-a-reflect-metadata-polyfill-in-jit-mode"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="dependency-on-a-reflect-metadata-polyfill-in-jit-mode">Dependency on a reflect-metadata polyfill in JIT mode<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#dependency-on-a-reflect-metadata-polyfill-in-jit-mode"><i class="material-icons">link</i></a></h3><p translation-result="on">Angular 应用程序，特别是依赖于 JIT 编译器的应用程序，过去常常需要 <a href="https://github.com/rbuckton/reflect-metadata">reflect-metadata</a> API 的腻子脚本。</p><p translation-origin="off">Angular applications, and specifically applications that relied on the JIT compiler, used to require a polyfill for the <a href="https://github.com/rbuckton/reflect-metadata">reflect-metadata</a> APIs.</p><p translation-result="on">在 Angular 8.0 版中不再需要这种 polyfill（<a href="https://github.com/angular/angular-cli/pull/14473">参见#14473</a> ），从而使大多数 Angular 应用程序中都不需要使用这个腻子脚本。因为这个腻子脚本可能由第三方库依赖，所以没有从所有 Angular 项目中删除它，所以我们不建议从 8.0 版本开始再使用这个腻子脚本。这应该能给库作者和应用程序开发人员足够的时间来评估他们是否需要这个腻子脚本，并执行必要的重构以消除对它的依赖。</p><p translation-origin="off">The need for this polyfill was removed in Angular version 8.0 (<a href="https://github.com/angular/angular-cli/pull/14473">see #14473</a>), rendering the presence of the poylfill in most Angular applications unnecessary. Because the polyfill can be depended on by 3rd-party libraries, instead of removing it from all Angular projects, we are deprecating the requirement for this polyfill as of version 8.0. This should give library authors and application developers sufficient time to evaluate if they need the polyfill, and perform any refactoring necessary to remove the dependency on it.</p><p translation-result="on">在典型的 Angular 项目中，这个腻子脚本不用于生产版本，因此删除它不会影响生产环境的应用程序。删除它是为了从整体上上简化构建设置并减少外部依赖项的数量。</p><p translation-origin="off">In a typical Angular project, the polyfill is not used in production builds, so removing it should not impact production applications. The goal behind this removal is overall simplification of the build setup and decrease in the number of external dependencies.</p><a id="static-query-resolution"></a><h3 id="viewchild--contentchild-static-resolution-as-the-default" translation-result="on">把 <code>@<a href="api/core/ViewChild" class="code-anchor">ViewChild</a>()</code> / <code>@<a href="api/core/ContentChild" class="code-anchor">ContentChild</a>()</code> 静态解析为默认值<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#viewchild--contentchild-static-resolution-as-the-default"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="viewchild--contentchild-static-resolution-as-the-default"><code>@<a href="api/core/ViewChild" class="code-anchor">ViewChild</a>()</code> / <code>@<a href="api/core/ContentChild" class="code-anchor">ContentChild</a>()</code> static resolution as the default<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#viewchild--contentchild-static-resolution-as-the-default"><i class="material-icons">link</i></a></h3><p translation-result="on">参见[<a href="guide/static-query-migration">静态查询的专用迁移指南</a> 。</p><p translation-origin="off">See the <a href="guide/static-query-migration">dedicated migration guide for static queries</a>.</p><a id="contentchild-input-together"></a><h3 id="contentchild--input-used-together" translation-result="on"><code>@<a href="api/core/ContentChild" class="code-anchor">ContentChild</a>()</code> / <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 一起使用<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#contentchild--input-used-together"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="contentchild--input-used-together"><code>@<a href="api/core/ContentChild" class="code-anchor">ContentChild</a>()</code> / <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> used together<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#contentchild--input-used-together"><i class="material-icons">link</i></a></h3><p translation-result="on">以下模式已弃用：</p><p translation-origin="off">The following pattern is deprecated:</p><code-example language="ts" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Input" class="code-anchor">Input</a>() @<a href="api/core/ContentChild" class="code-anchor">ContentChild</a>(<a href="api/core/TemplateRef" class="code-anchor">TemplateRef</a>) tpl !: <a href="api/core/TemplateRef" class="code-anchor">TemplateRef</a>&lt;any&gt;;</div><aio-code><pre class="lang-ts prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">()</span><span class="pln"> </span><span class="lit">@</span><a href="api/core/ContentChild" class="code-anchor"><span class="lit">ContentChild</span></a><span class="pun">(</span><a href="api/core/TemplateRef" class="code-anchor"><span class="typ">TemplateRef</span></a><span class="pun">)</span><span class="pln"> tpl </span><span class="pun">!:</span><span class="pln"> </span><a href="api/core/TemplateRef" class="code-anchor"><span class="typ">TemplateRef</span></a><span class="pun">&lt;</span><span class="pln">any</span><span class="pun">&gt;;</span></code>
    </pre></aio-code></code-example><p translation-result="on">与其使用这种模式，还不如将两个装饰器添加到各自的属性上并添加回退逻辑，如以下示例所示：</p><p translation-origin="off">Rather than using this pattern, separate the two decorators into their own properties and add fallback logic as in the following example:</p><code-example language="ts" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Input" class="code-anchor">Input</a>() tpl !: <a href="api/core/TemplateRef" class="code-anchor">TemplateRef</a>&lt;any&gt;; @<a href="api/core/ContentChild" class="code-anchor">ContentChild</a>(<a href="api/core/TemplateRef" class="code-anchor">TemplateRef</a>) inlineTemplate !: <a href="api/core/TemplateRef" class="code-anchor">TemplateRef</a>&lt;any&gt;;</div><aio-code><pre class="lang-ts prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">()</span><span class="pln"> tpl </span><span class="pun">!:</span><span class="pln"> </span><a href="api/core/TemplateRef" class="code-anchor"><span class="typ">TemplateRef</span></a><span class="pun">&lt;</span><span class="pln">any</span><span class="pun">&gt;;</span><span class="pln">
</span><span class="lit">@</span><a href="api/core/ContentChild" class="code-anchor"><span class="lit">ContentChild</span></a><span class="pun">(</span><a href="api/core/TemplateRef" class="code-anchor"><span class="typ">TemplateRef</span></a><span class="pun">)</span><span class="pln"> inlineTemplate </span><span class="pun">!:</span><span class="pln"> </span><a href="api/core/TemplateRef" class="code-anchor"><span class="typ">TemplateRef</span></a><span class="pun">&lt;</span><span class="pln">any</span><span class="pun">&gt;;</span></code>
    </pre></aio-code></code-example><a id="cant-assign-template-vars"></a><h3 id="cannot-assign-to-template-variables" translation-result="on">无法赋值给模板变量<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#cannot-assign-to-template-variables"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="cannot-assign-to-template-variables">Cannot assign to template variables<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#cannot-assign-to-template-variables"><i class="material-icons">link</i></a></h3><p translation-result="on">在下面的示例中，双向绑定意味着在 <code>valueChange</code> 事件触发时应该写入 <code>optionName</code>。</p><p translation-origin="off">In the following example, the two-way binding means that <code>optionName</code> should be written when the <code>valueChange</code> event fires.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;option *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let optionName of options" [(value)]="optionName"&gt;&lt;/option&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;option</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let optionName of options"</span><span class="pln"> [(</span><span class="atn">value</span><span class="pln">)]</span><span class="pun">=</span><span class="atv">"optionName"</span><span class="tag">&gt;&lt;/option&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">但实际上，Angular 只是忽略了对模板变量的双向绑定。从版本 8 开始，试图写入模板变量已弃用。在将来的版本中，我们将不支持这种写操作。</p><p translation-origin="off">However, in practice, Angular simply ignores two-way bindings to template variables. Starting in version 8, attempting to write to template variables is deprecated. In a future version, we will throw to indicate that the write is not supported.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;option *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let optionName of options" [value]="optionName"&gt;&lt;/option&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;option</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let optionName of options"</span><span class="pln"> [</span><span class="atn">value</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"optionName"</span><span class="tag">&gt;&lt;/option&gt;</span></code>
    </pre></aio-code></code-example><a id="undecorated-base-classes"></a><h3 id="undecorated-base-classes-using-angular-features" translation-result="on">使用 Angular 特性的不带修饰器的基类<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#undecorated-base-classes-using-angular-features"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="undecorated-base-classes-using-angular-features">Undecorated base classes using Angular features<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#undecorated-base-classes-using-angular-features"><i class="material-icons">link</i></a></h3><p translation-result="on">从版本 9 开始，不推荐使用不带装饰器的基类：</p><p translation-origin="off">As of version 9, it's deprecated to have an undecorated base class that:</p><ul><li><p translation-result="on">使用 Angular 特性</p><p translation-origin="off">uses Angular features</p></li><li><p translation-result="on">被指令或组件扩展（extends）</p><p translation-origin="off">is extended by a directive or component</p></li></ul><p translation-result="on">Angular 生命周期钩子或以下任何 Angular 字段装饰器均视为 Angular 特性：</p><p translation-origin="off">Angular lifecycle hooks or any of the following Angular field decorators are considered Angular features:</p><ul><li><code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code></li><li><code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code></li><li><code>@<a href="api/core/HostBinding" class="code-anchor">HostBinding</a>()</code></li><li><code>@<a href="api/core/HostListener" class="code-anchor">HostListener</a>()</code></li><li><code>@<a href="api/core/ViewChild" class="code-anchor">ViewChild</a>()</code> / <code>@<a href="api/core/ViewChildren" class="code-anchor">ViewChildren</a>()</code></li><li><code>@<a href="api/core/ContentChild" class="code-anchor">ContentChild</a>()</code> / <code>@<a href="api/core/ContentChildren" class="code-anchor">ContentChildren</a>()</code></li></ul><p translation-result="on">例如，以下写法已弃用，因为基类使用了 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 并且没有带类级装饰器：</p><p translation-origin="off">For example, the following case is deprecated because the base class uses <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and does not have a class-level decorator:</p><code-example language="ts" ng-version="9.0.0-rc.11"><div style="display:none">class Base { @<a href="api/core/Input" class="code-anchor">Input</a>() foo: string; } @<a href="api/core/Directive" class="code-anchor">Directive</a>(...) class Dir extends Base { ngOnChanges(): void { // notified when bindings to [foo] are updated } }</div><aio-code><pre class="lang-ts prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><span class="typ">Base</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">()</span><span class="pln">
  foo</span><span class="pun">:</span><span class="pln"> string</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Directive" class="code-anchor"><span class="lit">Directive</span></a><span class="pun">(...)</span><span class="pln">
</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">Dir</span><span class="pln"> extends </span><span class="typ">Base</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  ngOnChanges</span><span class="pun">():</span><span class="pln"> </span><span class="kwd">void</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// notified when bindings to [foo] are updated</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">在将来的 Angular 版本中，此代码将会引发错误。要解决此示例，请将无选择器的 <code>@<a href="api/core/Directive" class="code-anchor">Directive</a>()</code> 装饰器添加到基类上：</p><p translation-origin="off">In a future version of Angular, this code will start to throw an error. To fix this example, add a selectorless <code>@<a href="api/core/Directive" class="code-anchor">Directive</a>()</code> decorator to the base class:</p><code-example language="ts" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Directive" class="code-anchor">Directive</a>() class Base { @<a href="api/core/Input" class="code-anchor">Input</a>() foo: string; } @<a href="api/core/Directive" class="code-anchor">Directive</a>(...) class Dir extends Base { ngOnChanges(): void { // notified when bindings to [foo] are updated } }</div><aio-code><pre class="lang-ts prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Directive" class="code-anchor"><span class="lit">Directive</span></a><span class="pun">()</span><span class="pln">
</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">Base</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">()</span><span class="pln">
  foo</span><span class="pun">:</span><span class="pln"> string</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Directive" class="code-anchor"><span class="lit">Directive</span></a><span class="pun">(...)</span><span class="pln">
</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">Dir</span><span class="pln"> extends </span><span class="typ">Base</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  ngOnChanges</span><span class="pun">():</span><span class="pln"> </span><span class="kwd">void</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// notified when bindings to [foo] are updated</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">在版本 9 中，CLI 具有自动迁移功能，它将在运行 <code>ng <a href="api/forms/NgModel#update" class="code-anchor">update</a></code> 时为您更新代码。有关更改的更多信息和更多示例，请参见<a href="guide/migration-undecorated-classes">专用的迁移指南</a> 。</p><p translation-origin="off">In version 9, the CLI has an automated migration that will update your code for you when <code>ng <a href="api/forms/NgModel#update" class="code-anchor">update</a></code> is run. See <a href="guide/migration-undecorated-classes">the dedicated migration guide</a> for more information about the change and more examples.</p><a id="binding-to-innertext"></a><h3 id="binding-to-innertext-in-platform-server" translation-result="on">在 <code>platform-server</code> 中绑定到 <code>innerText</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#binding-to-innertext-in-platform-server"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="binding-to-innertext-in-platform-server">Binding to <code>innerText</code> in <code>platform-server</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#binding-to-innertext-in-platform-server"><i class="material-icons">link</i></a></h3><p translation-result="on">在服务器端渲染中使用的 <a href="https://github.com/fgnass/domino">Domino</a> 不支持<code>innerText</code>，因此在平台服务器中的 “domino适配器”中，如果尝试绑定到 <code>innerText</code>，则有一些特殊代码可以退回到 <code>textContent</code>。</p><p translation-origin="off"><a href="https://github.com/fgnass/domino">Domino</a>, which is used in server-side rendering, doesn't support <code>innerText</code>, so in platform-server's "domino adapter", there was special code to fall back to <code>textContent</code> if you tried to bind to <code>innerText</code>.</p><p translation-result="on">这两个属性有细微的差异，切换到 <code>textContent</code> 可能会让用户感到惊讶。因此，我们弃用了此行为。展望未来，用户应该在使用 Domino 时显式绑定到 <code>textContent</code> 。</p><p translation-origin="off">These two properties have subtle differences, so switching to <code>textContent</code> under the hood can be surprising to users. For this reason, we are deprecating this behavior. Going forward, users should explicitly bind to <code>textContent</code> when using Domino.</p><a id="wtf-apis"></a><h3 id="wtfstarttimerange-and-all-wtf-apis" translation-result="on"><code>wtfStartTimeRange</code> 和所有 <code>wtf*</code> API<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#wtfstarttimerange-and-all-wtf-apis"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="wtfstarttimerange-and-all-wtf-apis"><code>wtfStartTimeRange</code> and all <code>wtf*</code> APIs<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#wtfstarttimerange-and-all-wtf-apis"><i class="material-icons">link</i></a></h3><p translation-result="on">所有 <code>wtf*</code> API均已弃用，并将在以后的版本中删除。</p><p translation-origin="off">All of the <code>wtf*</code> APIs are deprecated and will be removed in a future version.</p><a id="webworker-apps"></a><h3 id="running-angular-applications-in-platform-webworker" translation-result="on">在 Platform-Webworker 中运行 Angular 应用程序<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#running-angular-applications-in-platform-webworker"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="running-angular-applications-in-platform-webworker">Running Angular applications in platform-webworker<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#running-angular-applications-in-platform-webworker"><i class="material-icons">link</i></a></h3><p translation-result="on"><code>@angular/platform-*</code> 软件包使 Angular 可以在不同的上下文中运行。例如，<code>@angular/platform-server</code> 使 Angular 可以在服务器上运行，而 <code>@angular/platform-browser</code> 使 Angular 可以在 Web 浏览器中运行。</p><p translation-origin="off">The <code>@angular/platform-*</code> packages enable Angular to be run in different contexts. For examples, <code>@angular/platform-server</code> enables Angular to be run on the server, and <code>@angular/platform-browser</code> enables Angular to be run in a web browser.</p><p translation-result="on"><code>@angular/platform-webworker</code> 是在 Angular 版本 2 中引入的，<code>@angular/platform-webworker</code> 是利用 Angular 的渲染体系结构在 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Worker 中</a>运行整个Web应用程序的实验。我们从这个实验中学到了很多，得出的结论是，对于大多数应用程序来说，在 Web Worker 中运行整个应用程序不是最佳策略。</p><p translation-origin="off"><code>@angular/platform-webworker</code> was introduced in Angular version 2 as an experiment in leveraging Angular's rendering architecture to run an entire web application in a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">web worker</a>. We've learned a lot from this experiment and have come to the conclusion that running the entire application in a web worker is not the best strategy for most applications.</p><p translation-result="on">展望未来，我们将专注于与 Web Worker 相关的工作，围绕它们的主要用例来分担初始渲染所需的 CPU 密集型非关键工作（例如内存中搜索和图像处理）。<a href="guide/web-worker">在 Angular CLI 中使用 Web Worker 指南中</a>了解更多信息。</p><p translation-origin="off">Going forward, we will focus our efforts related to web workers around their primary use case of offloading CPU-intensive, non-critical work needed for initial rendering (such as in-memory search and image processing). Learn more in the <a href="guide/web-worker">guide to Using Web Workers with the Angular CLI</a>.</p><p translation-result="on">从 Angular 8 版开始，所有 <code>platform-webworker</code> API均已弃用。这包括两个软件包：<code>@angular/platform-webworker</code> 和 <code>@angular/platform-webworker-dynamic</code> 。</p><p translation-origin="off">As of Angular version 8, all <code>platform-webworker</code> APIs are deprecated. This includes both packages: <code>@angular/platform-webworker</code> and <code>@angular/platform-webworker-dynamic</code>.</p><a id="entryComponents"></a><h3 id="entrycomponents-and-analyze_for_entry_components-no-longer-required" translation-result="on">不再需要 <code>entryComponents</code> 和 <code><a href="api/core/ANALYZE_FOR_ENTRY_COMPONENTS" class="code-anchor">ANALYZE_FOR_ENTRY_COMPONENTS</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#entrycomponents-and-analyze_for_entry_components-no-longer-required"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="entrycomponents-and-analyze_for_entry_components-no-longer-required"><code>entryComponents</code> and <code><a href="api/core/ANALYZE_FOR_ENTRY_COMPONENTS" class="code-anchor">ANALYZE_FOR_ENTRY_COMPONENTS</a></code> no longer required<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#entrycomponents-and-analyze_for_entry_components-no-longer-required"><i class="material-icons">link</i></a></h3><p translation-result="on">以前，<code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 定义中的 <code>entryComponents</code> 数组用于告诉编译器将动态创建和插入哪些组件。改用 Ivy 后，将不再需要它们，并且可以从现有模块声明中删除 <code>entryComponents</code> 数组。<code><a href="api/core/ANALYZE_FOR_ENTRY_COMPONENTS" class="code-anchor">ANALYZE_FOR_ENTRY_COMPONENTS</a></code> 注入令牌也是如此。</p><p translation-origin="off">Previously, the <code>entryComponents</code> array in the <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> definition was used to tell the compiler which components would be created and inserted dynamically. With Ivy, this isn't a requirement anymore and the <code>entryComponents</code> array can be removed from existing module declarations. The same applies to the <code><a href="api/core/ANALYZE_FOR_ENTRY_COMPONENTS" class="code-anchor">ANALYZE_FOR_ENTRY_COMPONENTS</a></code> injection token.</p><a id="moduleWithProviders"></a><h3 id="modulewithproviders-type-without-a-generic" translation-result="on">不带泛型的 <code><a href="api/core/ModuleWithProviders" class="code-anchor">ModuleWithProviders</a></code> 类型<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#modulewithproviders-type-without-a-generic"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="modulewithproviders-type-without-a-generic"><code><a href="api/core/ModuleWithProviders" class="code-anchor">ModuleWithProviders</a></code> type without a generic<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#modulewithproviders-type-without-a-generic"><i class="material-icons">link</i></a></h3><p translation-result="on">一些 Angular 库，例如 <code>@angular/router</code> 和 <code>@ngrx/store</code>，实现了一种返回 <code><a href="api/core/ModuleWithProviders" class="code-anchor">ModuleWithProviders</a></code> 类型的 API（通常借助名为 <code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code> 的方法）。此类型表示 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 以及其它服务提供者。 Angular 版本 9 不建议使用不带显式泛型类型的 <code><a href="api/core/ModuleWithProviders" class="code-anchor">ModuleWithProviders</a></code>，泛型类型是指 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 的类型。在 Angular 的未来版本中，泛型将不再是可选的。</p><p translation-origin="off">Some Angular libraries, such as <code>@angular/router</code> and <code>@ngrx/store</code>, implement APIs that return a type called <code><a href="api/core/ModuleWithProviders" class="code-anchor">ModuleWithProviders</a></code> (typically via a method named <code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code>). This type represents an <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> along with additional providers. Angular version 9 deprecates use of <code><a href="api/core/ModuleWithProviders" class="code-anchor">ModuleWithProviders</a></code> without an explicitly generic type, where the generic type refers to the type of the <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code>. In a future version of Angular, the generic will no longer be optional.</p><p translation-result="on">如果您使用的是 CLI，则 <code>ng <a href="api/forms/NgModel#update" class="code-anchor">update</a></code> 应该<a href="guide/migration-module-with-providers">会自动迁移代码</a>。如果没有使用 CLI，则可以将任何缺失的泛型类型手动添加到应用程序中。例如：</p><p translation-origin="off">If you're using the CLI, <code>ng <a href="api/forms/NgModel#update" class="code-anchor">update</a></code> should <a href="guide/migration-module-with-providers">migrate your code automatically</a>. If you're not using the CLI, you can add any missing generic types to your application manually. For example:</p><p translation-result="on"><strong>之前</strong></p><p translation-origin="off"><strong>Before</strong></p><code-example language="ts" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/NgModule" class="code-anchor">NgModule</a>({...}) export class MyModule { <a href="api/upgrade/static" class="code-anchor">static</a> forRoot(<a href="api/router/Router#config" class="code-anchor">config</a>: SomeConfig): <a href="api/core/ModuleWithProviders" class="code-anchor">ModuleWithProviders</a> { return { ngModule: SomeModule, providers: [ {provide: SomeConfig, <a href="api/core/ValueSansProvider#useValue" class="code-anchor">useValue</a>: <a href="api/router/Router#config" class="code-anchor">config</a>} ] }; } }</div><aio-code><pre class="lang-ts prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({...})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">MyModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><a href="api/upgrade/static" class="code-anchor"><span class="kwd">static</span></a><span class="pln"> forRoot</span><span class="pun">(</span><a href="api/router/Router#config" class="code-anchor"><span class="pln">config</span></a><span class="pun">:</span><span class="pln"> </span><span class="typ">SomeConfig</span><span class="pun">):</span><span class="pln"> </span><a href="api/core/ModuleWithProviders" class="code-anchor"><span class="typ">ModuleWithProviders</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      ngModule</span><span class="pun">:</span><span class="pln"> </span><span class="typ">SomeModule</span><span class="pun">,</span><span class="pln">
      providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="pun">{</span><span class="pln">provide</span><span class="pun">:</span><span class="pln"> </span><span class="typ">SomeConfig</span><span class="pun">,</span><span class="pln"> </span><a href="api/core/ValueSansProvider#useValue" class="code-anchor"><span class="pln">useValue</span></a><span class="pun">:</span><span class="pln"> </span><a href="api/router/Router#config" class="code-anchor"><span class="pln">config</span></a><span class="pun">}</span><span class="pln">
      </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">};</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on"><strong>后</strong></p><p translation-origin="off"><strong>After</strong></p><code-example language="ts" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/NgModule" class="code-anchor">NgModule</a>({...}) export class MyModule { <a href="api/upgrade/static" class="code-anchor">static</a> forRoot(<a href="api/router/Router#config" class="code-anchor">config</a>: SomeConfig): <a href="api/core/ModuleWithProviders" class="code-anchor">ModuleWithProviders</a>&lt;SomeModule&gt; { return { ngModule: SomeModule, providers: [ {provide: SomeConfig, <a href="api/core/ValueSansProvider#useValue" class="code-anchor">useValue</a>: <a href="api/router/Router#config" class="code-anchor">config</a> } ] }; } }</div><aio-code><pre class="lang-ts prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({...})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">MyModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><a href="api/upgrade/static" class="code-anchor"><span class="kwd">static</span></a><span class="pln"> forRoot</span><span class="pun">(</span><a href="api/router/Router#config" class="code-anchor"><span class="pln">config</span></a><span class="pun">:</span><span class="pln"> </span><span class="typ">SomeConfig</span><span class="pun">):</span><span class="pln"> </span><a href="api/core/ModuleWithProviders" class="code-anchor"><span class="typ">ModuleWithProviders</span></a><span class="pun">&lt;</span><span class="typ">SomeModule</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      ngModule</span><span class="pun">:</span><span class="pln"> </span><span class="typ">SomeModule</span><span class="pun">,</span><span class="pln">
      providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="pun">{</span><span class="pln">provide</span><span class="pun">:</span><span class="pln"> </span><span class="typ">SomeConfig</span><span class="pun">,</span><span class="pln"> </span><a href="api/core/ValueSansProvider#useValue" class="code-anchor"><span class="pln">useValue</span></a><span class="pun">:</span><span class="pln"> </span><a href="api/router/Router#config" class="code-anchor"><span class="pln">config</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln">
      </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">};</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><a id="esm5-fesm5"></a> <a id="esm5-fesm5"></a><h3 id="esm5-and-fesm5-code-formats-in-angular-npm-packages" translation-result="on">@angular/* npm 软件包中的 <code>esm5</code> 和 <code>fesm5</code> 代码格式<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#esm5-and-fesm5-code-formats-in-angular-npm-packages"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="esm5-and-fesm5-code-formats-in-angular-npm-packages"><code>esm5</code> and <code>fesm5</code> code formats in @angular/* npm packages<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#esm5-and-fesm5-code-formats-in-angular-npm-packages"><i class="material-icons">link</i></a></h3><p translation-result="on">从 Angular v8 开始，CLI 主要使用通过 <code>@angular/*</code> npm 包分发的 <code>fesm2015</code> 变体代码。这使得 <code>esm5</code> 和 <code>fesm5</code> 发行版变得过时和不必要，增加包的大小，并降低了 npm 的安装速度。</p><p translation-origin="off">As of Angular v8, the CLI primarily consumes the <code>fesm2015</code> variant of the code distributed via <code>@angular/*</code> npm packages. This renders the <code>esm5</code> and <code>fesm5</code> distributions obsolete and unnecessary, adding bloat to the package size and slowing down npm installations.</p><p translation-result="on">将来删除此发行版将不会对 CLI 用户产生任何影响，除非他们修改了自己的构建配置以显式使用这些代码发行版。</p><p translation-origin="off">The future removal of this distribution will have no impact on CLI users, unless they modified their build configuration to explicitly consume these code distributions.</p><p translation-result="on">任何仍依赖 <code>esm5</code> 和 <code>fesm5</code> 作为其构建系统输入的应用程序都需要确保构建管道能够接受符合 ECMAScript 2015（ES2015） 语言规范的 JavaScript 代码。</p><p translation-origin="off">Any application still relying on the <code>esm5</code> and <code>fesm5</code> as the input to its build system will need to ensure that the build pipeline is capable of accepting JavaScript code conforming to ECMAScript 2015 (ES2015) language specification.</p><p translation-result="on">请注意，此更改不会使以这种格式分发的现有库与 Angular CLI 不兼容。如果其他发行版不可用，CLI 将回退并以不太理想的格式使用库。但是，我们确实建议库以 ES2015 格式发布其代码，以加快构建速度并减小构建输出。</p><p translation-origin="off">Note that this change doesn't make existing libraries distributed in this format incompatible with the Angular CLI. The CLI will fall back and consume libraries in less desirable formats if others are not available. However, we do recommend that libraries ship their code in ES2015 format in order to make builds faster and build output smaller.</p><p translation-result="on">实际上，所有 <code>@angular</code> 软件包的 <code>package.json</code> 都将以如下方式更改：</p><p translation-origin="off">In practical terms, the <code>package.json</code> of all <code>@angular</code> packages will change in the following way:</p><p translation-result="on"><strong>之前</strong>：</p><p translation-origin="off"><strong>Before</strong>:</p><code-example ng-version="9.0.0-rc.11"><div style="display:none">{ "name": "@angular/core", "version": "9.0.0", "main": "./bundles/core.umd.js", "module": "./fesm5/core.js", "es2015": "./fesm2015/core.js", "esm5": "./esm5/core.js", "esm2015": "./esm2015/core.js", "fesm5": "./fesm5/core.js", "fesm2015": "./fesm2015/core.js", ... }</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">{</span><span class="pln">
  </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"@angular/core"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"version"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"9.0.0"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"main"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./bundles/core.umd.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"module"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./fesm5/core.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"es2015"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./fesm2015/core.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"esm5"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./esm5/core.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"esm2015"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./esm2015/core.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"fesm5"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./fesm5/core.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"fesm2015"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./fesm2015/core.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="pun">...</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on"><strong>之后</strong>：</p><p translation-origin="off"><strong>After</strong>:</p><code-example ng-version="9.0.0-rc.11"><div style="display:none">{ "name": "@angular/core", "version": "10.0.0", "main": "./bundles/core.umd.js", "module": "./fesm2015/core.js", "es2015": "./fesm2015/core.js", "esm2015": "./esm2015/core.js", "fesm2015": "./fesm2015/core.js", ... }</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">{</span><span class="pln">
  </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"@angular/core"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"version"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"10.0.0"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"main"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./bundles/core.umd.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"module"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./fesm2015/core.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"es2015"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./fesm2015/core.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"esm2015"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./esm2015/core.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"fesm2015"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./fesm2015/core.js"</span><span class="pun">,</span><span class="pln">
  </span><span class="pun">...</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">关于 npm 软件包格式的更多信息，请参见 <a href="https://goo.gl/jB3GVv">Angular 软件包格式规范</a> 。</p><p translation-origin="off">For more information about the npm package format, see the <a href="https://goo.gl/jB3GVv">Angular Package Format spec</a>.</p><a id="removed"></a><h2 id="removed-apis" translation-result="on">已删除的 API<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#removed-apis"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="removed-apis">Removed APIs<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#removed-apis"><i class="material-icons">link</i></a></h2><p translation-result="on">从9.0.0*版开始，以下API已被删除：</p><p translation-origin="off">The following APIs have been removed starting with version 9.0.0*:</p><table><thead><tr><th><p translation-result="on">包</p><p translation-origin="off">Package</p></th><th>API</th><th><p translation-result="on">替代品</p><p translation-origin="off">Replacement</p></th><th><p translation-result="on">备注</p><p translation-origin="off">Notes</p></th><th></th></tr></thead><tbody><tr><td><code>@angular/core</code></td><td><a href="https://v8.angular.io/api/core/Renderer"><code>Renderer</code></a></td><td><a href="https://angular.io/api/core/Renderer2"><code>Renderer2</code></a></td><td><p translation-result="on"><a href="guide/migration-renderer">迁移指南</a></p><p translation-origin="off"><a href="guide/migration-renderer">Migration guide</a></p></td><td></td></tr><tr><td><code>@angular/core</code></td><td><a href="https://v8.angular.io/api/core/RootRenderer"><code>RootRenderer</code></a></td><td><a href="https://angular.io/api/core/RendererFactory2"><code>RendererFactory2</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td></td></tr><tr><td><code>@angular/core</code></td><td><a href="https://v8.angular.io/api/core/RenderComponentType"><code>RenderComponentType</code></a></td><td><a href="https://angular.io/api/core/RendererType2"><code>RendererType2</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td></td></tr><tr><td><code>@angular/core</code></td><td><a href="https://v8.angular.io/api/core/WtfScopeFn"><code>WtfScopeFn</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td>v8</td><td><p translation-result="on">参见 <a href="guide/deprecations#wtf">Web 跟踪框架</a></p><p translation-origin="off">See <a href="guide/deprecations#wtf">Web Tracing Framework</a></p></td></tr><tr><td><code>@angular/core</code></td><td><a href="https://v8.angular.io/api/core/wtfCreateScope"><code>wtfCreateScope</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td>v8</td><td><p translation-result="on">参见 <a href="guide/deprecations#wtf">Web 跟踪框架</a></p><p translation-origin="off">See <a href="guide/deprecations#wtf">Web Tracing Framework</a></p></td></tr><tr><td><code>@angular/core</code></td><td><a href="https://v8.angular.io/api/core/wtfStartTimeRange"><code>wtfStartTimeRange</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td>v8</td><td><p translation-result="on">参见 <a href="guide/deprecations#wtf">Web 跟踪框架</a></p><p translation-origin="off">See <a href="guide/deprecations#wtf">Web Tracing Framework</a></p></td></tr><tr><td><code>@angular/core</code></td><td><a href="https://v8.angular.io/api/core/wtfEndTimeRange"><code>wtfEndTimeRange</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td>v8</td><td><p translation-result="on">参见 <a href="guide/deprecations#wtf">Web 跟踪框架</a></p><p translation-origin="off">See <a href="guide/deprecations#wtf">Web Tracing Framework</a></p></td></tr><tr><td><code>@angular/core</code></td><td><a href="https://v8.angular.io/api/core/wtfLeave"><code>wtfLeave</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td>v8</td><td><p translation-result="on">参见 <a href="guide/deprecations#wtf">Web 跟踪框架</a></p><p translation-origin="off">See <a href="guide/deprecations#wtf">Web Tracing Framework</a></p></td></tr><tr><td><code>@angular/common</code></td><td><code>DeprecatedI18NPipesModule</code></td><td><a href="api/common/CommonModule#pipes"><code>CommonModule</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td></td></tr><tr><td><code>@angular/common</code></td><td><code>DeprecatedCurrencyPipe</code></td><td><a href="api/common/CurrencyPipe"><code>CurrencyPipe</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td></td></tr><tr><td><code>@angular/common</code></td><td><code>DeprecatedDatePipe</code></td><td><a href="api/common/DatePipe"><code>DatePipe</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td></td></tr><tr><td><code>@angular/common</code></td><td><code>DeprecatedDecimalPipe</code></td><td><a href="api/common/DecimalPipe"><code>DecimalPipe</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td></td></tr><tr><td><code>@angular/common</code></td><td><code>DeprecatedPercentPipe</code></td><td><a href="api/common/PercentPipe"><code>PercentPipe</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td></td></tr><tr><td><code>@angular/forms</code></td><td><a href="https://v8.angular.io/api/forms/NgFormSelectorWarning"><code>NgFormSelectorWarning</code></a></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td></td></tr><tr><td><code>@angular/forms</code></td><td><p translation-result="on"><code><a href="api/forms/NgForm" class="code-anchor">ngForm</a></code> 元素选择器</p><p translation-origin="off"><code><a href="api/forms/NgForm" class="code-anchor">ngForm</a></code> element selector</p></td><td><p translation-result="on"><code><a href="api/forms/NgForm" class="code-anchor">ng-form</a></code> 元素选择器</p><p translation-origin="off"><code><a href="api/forms/NgForm" class="code-anchor">ng-form</a></code> element selector</p></td><td><p translation-result="on">无</p><p translation-origin="off">none</p></td><td></td></tr><tr><td><code>@angular/service-worker</code></td><td><code>versionedFiles</code></td><td><code>files</code></td><td><p translation-result="on">在 Service Worker 配置文件 <code>ngsw-config.json</code> 中，用 <code>files</code> 替换 <code>versionedFiles</code> 。参见<a href="guide/service-worker-config#assetgroups">Service Worker 配置</a> 。</p><p translation-origin="off">In the service worker configuration file <code>ngsw-config.json</code>, replace <code>versionedFiles</code> with <code>files</code>. See <a href="guide/service-worker-config#assetgroups">Service Worker Configuration</a>.</p></td><td></td></tr></tbody></table><p translation-result="on">要查看版本 8 中删除的API，请查看<a href="https://v8.angular.io/guide/deprecations#removed">版本 8 文档站点</a>上的本指南。</p><p translation-origin="off">*To see APIs removed in version 8, check out this guide on the <a href="https://v8.angular.io/guide/deprecations#removed">version 8 docs site</a>.</p><a id="http"></a><h3 id="angularhttp">@angular/http<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deprecations#angularhttp"><i class="material-icons">link</i></a></h3><p translation-result="on">已删除了整个 <a href="http://v7.angular.io/api/http"><code>@angular/http</code></a>包。请改用 <a href="api/common/http"><code>@angular/common/http</code></a>。</p><p translation-origin="off">The entire <a href="http://v7.angular.io/api/http"><code>@angular/http</code></a>package has been removed. Use <a href="api/common/http"><code>@angular/common/http</code></a>instead.</p><p translation-result="on">新的 API 用一种更小、更简单、更强大的方式来在 Angular 中发起 HTTP 请求。新的 API 简化成了更人性化的默认设计：不用再通过调用 <code>.json()</code> 方法进行映射。它还支持带类型的返回值，以及拦截器。</p><p translation-origin="off">The new API is a smaller, easier, and more powerful way to make HTTP requests in Angular. The new API simplifies the default ergonomics: There is no need to map by invoking the <code>.json()</code> method. It also supports typed return values and interceptors.</p><p translation-result="on">要更新你的应用：</p><p translation-origin="off">To update your apps:</p><ul><li><p translation-result="on">在每个模块中用 <a href="api/common/http/HttpClientModule"><code>HttpClientModule</code></a>（来自 <a href="api/common/http"><code>@angular/common/http</code></a>）代替 <code>HttpModule</code>。</p><p translation-origin="off">Replace <code>HttpModule</code> with <a href="api/common/http/HttpClientModule"><code>HttpClientModule</code></a>(from <a href="api/common/http"><code>@angular/common/http</code></a>) in each of your modules.</p></li><li><p translation-result="on">用 <a href="api/common/http/HttpClient"><code>HttpClient</code></a>服务代替 <code>Http</code> 服务。</p><p translation-origin="off">Replace the <code>Http</code> service with the <a href="api/common/http/HttpClient"><code>HttpClient</code></a>service.</p></li><li><p translation-result="on">删除所有 <code>map(res =&gt; res.json())</code> 调用，它们没用了。</p><p translation-origin="off">Remove any <code>map(res =&gt; res.json())</code> calls. They are no longer needed.</p></li></ul><p translation-result="on">有关使用 <code>@angular/common/<a href="api/common/http" class="code-anchor">http</a></code> 的更多信息，请参见 <a href="guide/http" title="HTTP Client指南">HttpClient 指南</a> 。</p><p translation-origin="off">For more information about using <code>@angular/common/<a href="api/common/http" class="code-anchor">http</a></code>, see the <a href="guide/http" title="HTTP Client guide">HttpClient guide</a>.</p><table><thead><tr><th><code>@angular/<a href="api/common/http" class="code-anchor">http</a></code></th><th><p translation-result="on"><code>@angular/common/<a href="api/common/http" class="code-anchor">http</a></code> 中最接近的替代品</p><p translation-origin="off">Closest replacement in <code>@angular/common/<a href="api/common/http" class="code-anchor">http</a></code></p></th></tr></thead><tbody><tr><td><code>BaseRequestOptions</code></td><td><a href="/api/common/http/HttpRequest"><code>HttpRequest</code></a></td></tr><tr><td><code>BaseResponseOptions</code></td><td><a href="/api/common/http/HttpResponse"><code>HttpResponse</code></a></td></tr><tr><td><code>BrowserXhr</code></td><td></td></tr><tr><td><code>Connection</code></td><td><a href="/api/common/http/HttpBackend"><code>HttpBackend</code></a></td></tr><tr><td><code>ConnectionBackend</code></td><td><a href="/api/common/http/HttpBackend"><code>HttpBackend</code></a></td></tr><tr><td><code>CookieXSRFStrategy</code></td><td><a href="/api/common/http/HttpClientXsrfModule"><code>HttpClientXsrfModule</code></a></td></tr><tr><td><code>Headers</code></td><td><a href="/api/common/http/HttpHeaders"><code>HttpHeaders</code></a></td></tr><tr><td><code>Http</code></td><td><a href="/api/common/http/HttpClient"><code>HttpClient</code></a></td></tr><tr><td><code>HttpModule</code></td><td><a href="/api/common/http/HttpClientModule"><code>HttpClientModule</code></a></td></tr><tr><td><code>Jsonp</code></td><td><a href="/api/common/http/HttpClient"><code>HttpClient</code></a></td></tr><tr><td><code>JSONPBackend</code></td><td><a href="/api/common/http/JsonpClientBackend"><code>JsonpClientBackend</code></a></td></tr><tr><td><code>JSONPConnection</code></td><td><a href="/api/common/http/JsonpClientBackend"><code>JsonpClientBackend</code></a></td></tr><tr><td><code>JsonpModule</code></td><td><a href="/api/common/http/HttpClientJsonpModule"><code>HttpClientJsonpModule</code></a></td></tr><tr><td><code>QueryEncoder</code></td><td><a href="/api/common/http/HttpUrlEncodingCodec"><code>HttpUrlEncodingCodec</code></a></td></tr><tr><td><code>ReadyState</code></td><td><a href="/api/common/http/HttpBackend"><code>HttpBackend</code></a></td></tr><tr><td><code>Request</code></td><td><a href="/api/common/http/HttpRequest"><code>HttpRequest</code></a></td></tr><tr><td><code>RequestMethod</code></td><td><a href="/api/common/http/HttpClient"><code>HttpClient</code></a></td></tr><tr><td><code>RequestOptions</code></td><td><a href="/api/common/http/HttpRequest"><code>HttpRequest</code></a></td></tr><tr><td><code>RequestOptionsArgs</code></td><td><a href="/api/common/http/HttpRequest"><code>HttpRequest</code></a></td></tr><tr><td><code><a href="api/common/http/HttpEventType#Response" class="code-anchor">Response</a></code></td><td><a href="/api/common/http/HttpResponse"><code>HttpResponse</code></a></td></tr><tr><td><code>ResponseContentType</code></td><td><a href="/api/common/http/HttpClient"><code>HttpClient</code></a></td></tr><tr><td><code>ResponseOptions</code></td><td><a href="/api/common/http/HttpResponse"><code>HttpResponse</code></a></td></tr><tr><td><code>ResponseOptionsArgs</code></td><td><a href="/api/common/http/HttpResponse"><code>HttpResponse</code></a></td></tr><tr><td><code>ResponseType</code></td><td><a href="/api/common/http/HttpClient"><code>HttpClient</code></a></td></tr><tr><td><code>URLSearchParams</code></td><td><a href="/api/common/http/HttpParams"><code>HttpParams</code></a></td></tr><tr><td><code>XHRBackend</code></td><td><a href="/api/common/http/HttpXhrBackend"><code>HttpXhrBackend</code></a></td></tr><tr><td><code>XHRConnection</code></td><td><a href="/api/common/http/HttpXhrBackend"><code>HttpXhrBackend</code></a></td></tr><tr><td><code>XSRFStrategy</code></td><td><a href="/api/common/http/HttpClientXsrfModule"><code>HttpClientXsrfModule</code></a></td></tr></tbody></table><table><thead><tr><th><code>@angular/<a href="api/common/http" class="code-anchor">http</a>/testing</code></th><th><p translation-result="on"><code>@angular/common/<a href="api/common/http" class="code-anchor">http</a>/testing</code> 中最接近的替代品</p><p translation-origin="off">Closest replacement in <code>@angular/common/<a href="api/common/http" class="code-anchor">http</a>/testing</code></p></th></tr></thead><tbody><tr><td><code>MockBackend</code></td><td><a href="/api/common/http/testing/HttpTestingController"><code>HttpTestingController</code></a></td></tr><tr><td><code>MockConnection</code></td><td><a href="/api/common/http/testing/HttpTestingController"><code>HttpTestingController</code></a></td></tr></tbody></table></div></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li class="h1 ng-star-inserted active" title="弃用的 API 和特性"><a href="guide/deprecations#deprecated-apis-and-features">弃用的 API 和特性</a></li><li class="h2 ng-star-inserted" title="索引"><a href="guide/deprecations#index">索引</a></li><li class="h2 ng-star-inserted" title="已弃用的 API"><a href="guide/deprecations#deprecated-apis">已弃用的 API</a></li><li class="h3 ng-star-inserted" title="@angular/common"><a href="guide/deprecations#angularcommon">@angular/common</a></li><li class="h3 ng-star-inserted" title="@angular/core"><a href="guide/deprecations#angularcore">@angular/core</a></li><li class="h3 ng-star-inserted" title="@angular/core/testing"><a href="guide/deprecations#angularcoretesting">@angular/core/testing</a></li><li class="h3 ng-star-inserted" title="@angular/forms"><a href="guide/deprecations#angularforms">@angular/forms</a></li><li class="h3 ng-star-inserted" title="@angular/router"><a href="guide/deprecations#angularrouter">@angular/router</a></li><li class="h3 ng-star-inserted" title="@angular/platform-webworker"><a href="guide/deprecations#angularplatform-webworker">@angular/platform-webworker</a></li><li class="h3 ng-star-inserted" title="@angular/upgrade"><a href="guide/deprecations#angularupgrade">@angular/upgrade</a></li><li class="h3 ng-star-inserted" title="@angular/upgrade/static"><a href="guide/deprecations#angularupgradestatic">@angular/upgrade/static</a></li><li class="h2 ng-star-inserted" title="已弃用的特性"><a href="guide/deprecations#deprecated-features">已弃用的特性</a></li><li class="h3 ng-star-inserted" title="Web 跟踪框架集成"><a href="guide/deprecations#web-tracing-framework-integration">Web 跟踪框架集成</a></li><li class="h3 ng-star-inserted" title="/deep/ ， >>> 和 :ng-deep 组件样式选择器"><a href="guide/deprecations#deep--and-ng-deep-component-style-selectors"><code>/deep/</code> ， <code>&gt;&gt;&gt;</code> 和 <code>:ng-deep</code> 组件样式选择器</a></li><li class="h3 ng-star-inserted" title="<template> tag"><a href="guide/deprecations#template-tag">&lt;template&gt; tag</a></li><li class="h3 ng-star-inserted" title="和响应式表单一起使用 ngModel"><a href="guide/deprecations#ngmodel-with-reactive-forms">和响应式表单一起使用 ngModel</a></li><li class="h3 ng-star-inserted" title="ReflectiveInjector"><a href="guide/deprecations#reflectiveinjector">ReflectiveInjector</a></li><li class="h3 ng-star-inserted" title="loadChildren 字符串语法"><a href="guide/deprecations#loadchildren-string-syntax">loadChildren 字符串语法</a></li><li class="h3 ng-star-inserted" title="ActivatedRoute 的 params 和 queryParams 属性"><a href="guide/deprecations#activatedroute-params-and-queryparams-properties">ActivatedRoute 的 params 和 queryParams 属性</a></li><li class="h3 ng-star-inserted" title="在 JIT 模式下对 reflect-metadata 腻子脚本的依赖"><a href="guide/deprecations#dependency-on-a-reflect-metadata-polyfill-in-jit-mode">在 JIT 模式下对 reflect-metadata 腻子脚本的依赖</a></li><li class="h3 ng-star-inserted" title="把 @ViewChild() / @ContentChild() 静态解析为默认值"><a href="guide/deprecations#viewchild--contentchild-static-resolution-as-the-default">把 <code>@ViewChild()</code> / <code>@ContentChild()</code> 静态解析为默认值</a></li><li class="h3 ng-star-inserted" title="@ContentChild() / @Input() 一起使用"><a href="guide/deprecations#contentchild--input-used-together"><code>@ContentChild()</code> / <code>@Input()</code> 一起使用</a></li><li class="h3 ng-star-inserted" title="无法赋值给模板变量"><a href="guide/deprecations#cannot-assign-to-template-variables">无法赋值给模板变量</a></li><li class="h3 ng-star-inserted" title="使用 Angular 特性的不带修饰器的基类"><a href="guide/deprecations#undecorated-base-classes-using-angular-features">使用 Angular 特性的不带修饰器的基类</a></li><li class="h3 ng-star-inserted" title="在 platform-server 中绑定到 innerText"><a href="guide/deprecations#binding-to-innertext-in-platform-server">在 <code>platform-server</code> 中绑定到 <code>innerText</code></a></li><li class="h3 ng-star-inserted" title="wtfStartTimeRange 和所有 wtf* API"><a href="guide/deprecations#wtfstarttimerange-and-all-wtf-apis"><code>wtfStartTimeRange</code> 和所有 <code>wtf*</code> API</a></li><li class="h3 ng-star-inserted" title="在 Platform-Webworker 中运行 Angular 应用程序"><a href="guide/deprecations#running-angular-applications-in-platform-webworker">在 Platform-Webworker 中运行 Angular 应用程序</a></li><li class="h3 ng-star-inserted" title="不再需要 entryComponents 和 ANALYZE_FOR_ENTRY_COMPONENTS"><a href="guide/deprecations#entrycomponents-and-analyze_for_entry_components-no-longer-required">不再需要 <code>entryComponents</code> 和 <code>ANALYZE_FOR_ENTRY_COMPONENTS</code></a></li><li class="h3 ng-star-inserted" title="不带泛型的 ModuleWithProviders 类型"><a href="guide/deprecations#modulewithproviders-type-without-a-generic">不带泛型的 <code>ModuleWithProviders</code> 类型</a></li><li class="h3 ng-star-inserted" title="@angular/* npm 软件包中的 esm5 和 fesm5 代码格式"><a href="guide/deprecations#esm5-and-fesm5-code-formats-in-angular-npm-packages">@angular/* npm 软件包中的 <code>esm5</code> 和 <code>fesm5</code> 代码格式</a></li><li class="h2 ng-star-inserted" title="已删除的 API"><a href="guide/deprecations#removed-apis">已删除的 API</a></li><li class="h3 ng-star-inserted" title="@angular/http"><a href="guide/deprecations#angularhttp">@angular/http</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li><li class="ng-star-inserted"><a class="link" href="analytics" title="Angular 使用情况分析">使用情况分析</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Angular events around the world.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.tw/" title="正體中文版">正體中文版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2020. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：9.0.1-build.109+sha.7a49faba.</p></aio-footer></footer><div class="cdk-visually-hidden ng-star-inserted"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true">&nbsp;</mat-icon></div></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime-es2015.811b066977719df5af39.js" type="module"></script><script src="runtime-es5.811b066977719df5af39.js" nomodule="" defer=""></script><script src="polyfills-es5.1494ca908613f3429457.js" nomodule="" defer=""></script><script src="polyfills-es2015.9057a05c650bf60ecbf4.js" type="module"></script><script src="main-es2015.4e9aa34b562bab1382ab.js" type="module"></script><script src="main-es5.4e9aa34b562bab1382ab.js" nomodule="" defer=""></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>